Radiobuttons Horizontal align

rss

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

<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
    Dmitry Kozlov
    Admin
    Member for: 5 years 10 months 26 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.

  • Vinay Muppidi
    Vinay Muppidi
    Member
    Member for: 5 years 2 months 17 days
    #2 by Vinay Muppidi Jul 14 ’14 at 02:15

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

  • Sonoma
    Member
    Member for: 4 years 10 months 23 days
    #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

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 5 years 10 months 26 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.

  • Sonoma
    Member
    Member for: 4 years 10 months 23 days
    #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?

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 5 years 10 months 26 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);
    
  • Sonoma
    Member
    Member for: 4 years 10 months 23 days
    #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.

     

     

  • Sonoma
    Member
    Member for: 4 years 10 months 23 days
    #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;
    }

     

     

     

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 5 years 10 months 26 days
    #9 by Dmitry Kozlov Nov 10 ’14 at 04:27

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

  • Sonoma
    Member
    Member for: 4 years 10 months 23 days
    #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.

     

Displaying 1 to 10 of 10 messages