Radiobuttons Horizontal align

Posted by Vinay Muppidi - Jul 11 ’14 at 01:47

• 

  Dmitry Kozlov

  Admin

  Member for: 10 years 4 days
  #1 by Dmitry Kozlov Jul 14 ’14 at 04:28

  Please, try the following code:

  var rows = fd.field('Choice').control()._el().find('table tr td');
  fd.field('Choice')
  	.control()
  	._el()
  	.find('table > tbody')
  	.empty()
  	.append($('<tr />').append(rows));
  

  Replace 'Choice' with the internal name of your field.

  link flag
• 

  Vinay Muppidi

  Member

  Member for: 9 years 3 months 25 days
  #2 by Vinay Muppidi Jul 14 ’14 at 02:15

  [#1]: Thanks Dimitry ..works perfect!

  link flag
• Sonoma

  Member

  Member for: 9 years 1 day
  #3 by Sonoma Oct 7 ’14 at 11:06

  Thank you for this. Is there any way to group them radio buttons or check boxes.

   

  e.g. 3X3

  O A     O   D    O  G

  O  B    O   E    O   H

  O  C    O   F    O   Other

   

  another 3X2X3 as in daysm nonths years, etc. Below is an example of one multi select check box called treatment. the answer could be days,  Pre-trial, Pending

  O days            O Trial        O Unknown

  O weeks         O Pre-Trial  O Pending

  O months                            O Constant

   

  Thank you

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 10 years 4 days
  #4 by Dmitry Kozlov Oct 8 ’14 at 03:35

  [#3]: Hi,

  3x3 grouping:

  var options = fd.field('Choice').control()._el().find('td');
  var content = '<table>';
  for (var i = 0; i < 3; i++) {
  	content += '<tr>';
  	for (var j = 0; j < 3; j++) {
  		content += '<td>' + options.eq(i + 3 * j).html() + '</td>';
  	}
  	content += '</tr>'
  }
  content += '</table>';
  fd.field('Choice').control()._el().html(content);
  

  Please, replace "Choice" with the internal name of your field.

  If you use checkboxes as options, you'd better split them into multiple Choice fields and arrange them on the form as you need with help of Forms Designer.

  link flag
• Sonoma

  Member

  Member for: 9 years 1 day
  #5 by Sonoma Oct 9 ’14 at 09:02

  Thank you. Works great. I can even add my borders ( class=my-table).  I am mainly using radios.

   

  Anyway to kick out the "undefined" if you have an odd amount of objects?

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 10 years 4 days
  #6 by Dmitry Kozlov Oct 13 ’14 at 03:30

  [#5]: Hi,

  Please, try the following code:

  var options = fd.field('Choice').control()._el().find('td');
  var content = '<table>';
  for (var i = 0; i < 3; i++) {
  	content += '<tr>';
  	for (var j = 0; j < 3; j++) {
  		if (options.length > i + 3 * j) {
  			content += '<td>' + options.eq(i + 3 * j).html() + '</td>';
  		} else {
  			content += '<td></td>';
  		}
  	}
  	content += '</tr>'
  }
  content += '</table>';
  fd.field('Choice').control()._el().html(content);
  

  link flag
• Sonoma

  Member

  Member for: 9 years 1 day
  #7 by Sonoma Oct 13 ’14 at 11:06

  [#6]: Perfect.

  The added check allows for many configurations.

   

  For Example I may need 5 options in one column and an "Other" with user add input box option in the other column.

  var options = fd.field('Option').control()._el().find('td');
  var content = '<table>';
  for (var i = 0; i < 5; i++) { //Rows
  content += '<tr>';
  for (var j = 0; j < 6; j++) { //Columns
  if (options.length > i + 5 * j) { //Rows
  content += '<td>' + options.eq(i + 5 * j).html() + '</td>'; //Rows
  } else {
  content += '<td></td>';
  }
  }
  content += '</tr>'
  }
  content += '</table>';
  fd.field('Option').control()._el().html(content);

  // Modify default SP text "Specify your own value:"
  $("label").each(function() { if ($(this).html() == "Specify your own value:") $(this).html("Other (specify)") } )

   

  In some cases I need 3 columns with configuration of 3 1 3. 3 and 1 are always linked in the data and the 3rd is usually seperated.

   

  Great solution. Thank you very much.

   

   

  link flag
• Sonoma

  Member

  Member for: 9 years 1 day
  #8 by Sonoma Nov 7 ’14 at 11:43

  [#7]:

   

  We needed something for the display form for displaying large list results from Options list allowing multiple answers to be selected that would be allow for columns and rows to be adjusted dynamically.

  If I make the browser smaller the list auto adjust. and vice versa. e.g. in large screen I will have 4 columns and 5 rows and if I make is smaller I will have 2 columns and 10 rows. and is I go smaller one column and 20 rows.

  I did some digging and picking and came up with this. I guess it could work with the edit and display form as well. Either way just thought I would share.

   

  JS:

  // Options list results with multiple choices allowed

  var arr = fd.field('OPTION').control()._el().text().split(';');
  var content = '';
  $.each( arr, function( index, value ){
  content += '<div class=\"list_item\">' + value + '</div>';
  });
  fd.field('OPTION').control()._el().html(content);

   

   

  CSS:

  .auto_list {
  margin: 5px;
  padding: 5px;
  width: 300px;
  float: left;
  text-decoration : underline;
  }

   

   

   

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 10 years 4 days
  #9 by Dmitry Kozlov Nov 10 ’14 at 04:27

  [#8]: Great! Thanks a lot for your worthwhile sample!

  link flag
• Sonoma

  Member

  Member for: 9 years 1 day
  #10 by Sonoma Nov 10 ’14 at 12:24

  [#8]:

  Note: Had the class name incorrect. Not sure how to edit properly in I can even edit it.

  <div class=\"list_item\">

  <div class=\"your_class_name\">

  Class: .list_item -> .auto_list  Or .your_class_name

   

  I also attempted to use column-count but had no luck.

  http://www.w3schools.com/cssref/css3_pr_column-count.aspI

  I also tested jquery.easyListSplitter.js and not luck either.

   

  link flag

Show more messages