Appnitro Software Forums » MachForm

Radio buttons on same line?

(9 posts)

  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 1 year ago #

  2. yuniar
    MachForm Founder

    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.

    Posted 1 year 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 1 month ago #

  4. redityo
    MachForm Support

    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;

}
    Posted 1 month 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 1 month ago #

  6. redityo
    MachForm Support

    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;*/
}
    Posted 1 month ago #

  7. katya
    Member

    Very much appreciated! thank you. worked just right.

    Posted 1 month 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 2 weeks ago #

  9. redityo
    MachForm Support

    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>";
    Posted 2 weeks ago #

RSS feed for this topic

Reply

You must log in to post.