Radiobuttons Horizontal align

[Vinay Muppidi]

<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.

[Dmitry Kozlov]

Please, try the following code:

Code: Select all

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.

[Vinay Muppidi]

Thanks Dimitry ..works perfect!

[Sonoma]

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

[Dmitry Kozlov]

Hi,

3x3 grouping:

Code: Select all

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.

[Sonoma]

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?

[Dmitry Kozlov]

Hi,

Please, try the following code:

Code: Select all

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);

[Sonoma]

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.

[Sonoma]

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;

[Dmitry Kozlov]

Great! Thanks a lot for your worthwhile sample!