Forms Designer Forum

<div class="ms-formbody fd_control" fd_readonly="False" style="margin-left: 160px;" fd_type="RadioButtons">


How do I align the radio buttons horizontally on the form? Please advise.

Please, try the following code:
Replace 'Choice' with the internal name of your field.

Thanks Dimitry ..works perfect!

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

Hi,

3x3 grouping:
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.

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?

Hi,

Please, try the following code:

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.

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;

Great! Thanks a lot for your worthwhile sample!