This forum is no longer open and is for reading/searching only.

Please use our new MachForm Community Forum instead.

MachForm Community Forums » MachForm 2

Radio buttons on same line?


  1. EricM
    Member

    Hi i know its been posted how to put 2 fields on the same line but is there a way to put radio buttons or checkboxes on the same line?

    thanks

    btw great application

    Posted 15 years ago #
  2. yuniar

    Hi Eric,

    For radio buttons/checkboxes, we need a different method.
    Take a look at this sample http://www.appnitro.com/forms/view.php?id=7

    You can see the custom CSS at the bottom of this file:
    http://www.appnitro.com/forms/data/form_7/css/view.css

    So basically what we need to do is to set the display property of those labels, checkboxes and radio button to inline.

    On the sample form above, if you look at the HTML code, Multiple Choice is surrounded by a li with id li_1, the CSS for this element:

    #li_1 label.choice {
    	display:inline;
    	position:relative;
    	margin-left: 0.2em;
    	_top:0.2em;
    }
    
    #li_1 input.radio {
    	display: inline;
    	margin-left: 0.5em;
    }

    While the Checkboxes fields are surrounded by a li with id li_2, the CSS is:

    #li_2 label.choice {
    	display:inline;
    	position:relative;
    	margin-left: 0.2em;
    	_top:0.2em;
    }
    
    #li_2 input.checkbox{
    	display: inline;
    	margin-left: 0.5em;
    }

    So you can use the above CSS for your form, one for the checkboxes and the other for multiple choice. Adjust li_1 and li_2 to match your elements id.

    Let me know if you need more help.


    MachForm Founder

    Posted 15 years ago #
  3. katya
    Member

    I have my form at http://holtmusic.com.au/contact/view.php?id=3

    I added your coding suggestion for side by side radio buttons to my css.

    #li_1 label.choice {
    display:inline;
    position:relative;
    margin-left: 0.2em;
    _top:0.2em;
    }

    #li_1 input.radio {
    display: inline;
    margin-left: 0.5em;
    }
    but not sure why it didnt work. Could you take a peek please?

    Posted 14 years ago #
  4. redityo

    Hi katya,

    I have seen your form it seems your element id = 1 type isn't radio button, but I curious do you want to change all radio button or only some of them ?

    if you want to change some radio button you can change by these code, where 7 is your radio button element id :

    #li_7 label.choice {
    	display:inline ;
    	position:relative ;
    	margin-left: 0.2em ;
    	_top:0.2em;
    }
    
    #li_7 input.radio {
    	display: inline ;
    	margin-left: 0.5em;
    }

    but it's more easier if you line up all radio button, just find "#main_body input.radio" and
    "#main_body label.choice" section in your CSS form and replace with these code

    #main_body input.radio
    {
    	display:inline;
            _top:0.2em;
    	/*height:13px;*/
    	/*line-height:1.4em;*/
    	/*margin:6px 0 0 3px;*/
    	/*width:13px;*/
    }
    
    #main_body label.choice
    {
    	color:#444;
    	display:inline;
    	font-size:100%;
    	line-height:1.4em;
    	/*margin:-1.55em 0 0 25px;*/
    	padding:4px 0 5px;
    	width:90%;
            position:relative;
    	margin-left: 0.2em;
    	_top:0.2em;
    
    }

    MachForm Support

    Posted 14 years ago #
  5. katya
    Member

    Thanks! that seem to do the job. How about the checkboxes

    http://holtmusic.com.au/contact/view.php?id=3

    would you mind telling me how I can put the checkbox next to the name:

    Bubble Machine
    Smoke Machine
    Lasers
    Dry Ice Effect

    Posted 14 years ago #
  6. redityo

    try to search "#main_body input.checkbox" and replace with these code

    #main_body input.checkbox
    {
    	display:inline;
           _top:0.5em;
    	/*height:13px;*/
    	/*line-height:1.4em;*/
    	/*margin:6px 0 0 3px;*/
    	/*width:13px;*/
    }

    MachForm Support

    Posted 14 years ago #
  7. katya
    Member

    Very much appreciated! thank you. worked just right.

    Posted 14 years ago #
  8. mmaywood
    Member

    Hello everyone, is there anyway with checkboxes or radio buttons to block them in like a table, so the options align, my issue is that I want only three options per line, while the relative option is great it does not align well, there are around twenty check boxes in my list.. so it starts to look a real jumble. Thanks Mike

    Posted 14 years ago #
  9. redityo

    Hello Mike,

    Actually it must use the table :) to do so. You should modify some code on "includes/view-functions.php" files. There are 2 main function should change, try to follow there steps :

    1. check box modification

    Replace code between line 558 ~ 580, with this :

    $option_markup = '';
    
    $option_markup .= '<table width="580px" border="0" cellpadding="0">';
    $cell_col = 1;
    
    foreach ($element->options as $option){
    	if(!$is_populated){
    		if($option->is_default){
    			$checked = 'checked="checked"';
    		}else{
    			$checked = '';
    		}
    	}else{
    
    		if(!empty($element->populated_value['element_'.$element->id.'_'
    		.$option->id]['default_value'])){
    			$checked = 'checked="checked"';
    		}else{
    			$checked = '';
    		}
    	}
    
    	$option_input = "<input id=\"element_{$element->id}_{$option->id}\"
    	name=\"element_{$element->id}_{$option->id}\"
    	class=\"element checkbox\" type=\"checkbox\" value=\"1\" {$checked} />";
    	$option_label = "<label class=\"choice\" for=\"element_{$element->id}_{$option->id}\">
    	{$option->option}</label>";
    
    	if ($cell_col == 1) {
    		$option_markup .= '<tr>';
    	}		
    
    	$option_markup .= '<td width="35%">' . $option_input . ' ' . $option_label . '</td>';
    
    	if ($cell_col == 3) {
    		$option_markup .= '</tr>';
    		$cell_col = 0;
    	}
    
    	$cell_col++;
    
    }
    
    $option_markup .= '</table>';

    2. radio option modification

    Replace code between line 485~ 511 (before modification), with this :

    $option_markup  .= '<table width="580px" border="0">';
    $cell_col = 1;
    
    foreach ($element->options as $option){
    
    	if($option->is_default){
    		$checked = 'checked="checked"';
    	}else{
    		$checked = '';
    	}
    
    	//check for populated values
    	if(!empty($element->populated_value['element_'.$element->id]['default_value'])){
    		$checked = '';
    		if($element->populated_value['element_'.$element->id]['default_value']
    		== $option->id){
    			$checked = 'checked="checked"';
    		}
    	}
    
    	$option_input = "<input id=\"element_{$element->id}_{$option->id}\"
    	name=\"element_{$element->id}\" class=\"element radio\"
    	type=\"radio\" value=\"{$option->id}\" {$checked} />";
    	$option_label = "<label class=\"choice\" for=\"element_{$element->id}_{$option->id}\">
    	{$option->option}</label>";
    
    	if ($cell_col == 1) {
    		$option_markup .= '<tr>';
    	}		
    
    	$option_markup .= '<td width="35%">' . $option_input . ' ' . $option_label . '</td>';
    
    	if ($cell_col == 3) {
    		$option_markup .= '</tr>';
    		$cell_col = 0;
    	}
    
    	$cell_col++;
    }
    
    $option_markup .= "</table>";

    MachForm Support

    Posted 14 years ago #
  10. teamwebb2008
    Member

    Darn, looks like I'm going to have to manually align my check boxes, neither of the above worked for me.

    Posted 14 years ago #
  11. yuniar

    Paste me your form URL or shoot an email to customer.service [at] appnitro.com
    I'll check your form.


    MachForm Founder

    Posted 14 years ago #
  12. miamiman
    Member

    Sorry guys, but how do you easily set up a horizontal radio button series?

    Do you...?
    Yes / No / Maybe

    Thanks,

    Posted 13 years ago #
  13. yuniar

    Have you tried the above CSS code? That should do it.


    MachForm Founder

    Posted 13 years ago #
  14. LaMaison
    Member

    redityo,

    Great mod.

    Thanks

    Posted 13 years ago #
  15. smudge
    Member

    This works but is tricky. Be nice as a new feature to be able to selsct the layout from the form builder otherwise I have to use the code to specify every id I want to alter. Lots of CSS..

    Inline is useful for:

    Polls
    Surveys
    Date / Credit card / Serial numbers

    Posted 13 years ago #
  16. jintexas
    Member

    Hi,
    I have applied the code changes suggested to view.css and ../includes/view-functions.php without any success at all. has there been some change to the code structure? or are there more specific instructions you can offer. E.G. List the specific .css sheet/s that must be modified, the code to use, and the order to modify them.

    This looks like a great tool, and I thank you for your help.

    J

    Posted 13 years ago #
  17. jintexas
    Member

    I have figured it all out. No problem with the app. or the code. Simple operator error at my end. Always the way isn't it.

    Tanks.

    J

    Posted 13 years ago #
  18. tania
    Member

    Hi,

    My form http://www.csvep.com/registration/view.php?id=11 does not look very good because my client's answers are too long.... Since I did not make a copy (I know beginner error!) of the view-functions.php can you tell me what the original code was so I can replace it back?

    Thanks!

    Posted 13 years ago #
  19. yuniar

    Hi tania,

    You can always login to our customer area and download machform package there :)


    MachForm Founder

    Posted 13 years ago #
  20. davidvictory
    Member

    I tried the solutions above (not the table) with no luck putting radio buttons side by side. here is URL to my form (simple form)..http://login.comfortkeepers.com/machform/view.php?id=5

    Please assist. Also, how can I determine the version of the software I am running?

    Thank you

    Posted 12 years ago #

RSS feed for this topic

Reply »