Radio buttons on same line? « HTML Form Builder Online , PHP Form Creator

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?

Started 16 years ago by EricM | 41 posts |

1 2 3 Next »

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 16 years ago #
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 16 years ago #
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 15 years ago #

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 15 years ago #

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 15 years ago #

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 15 years ago #

katya
Member

Very much appreciated! thank you. worked just right.

Posted 15 years ago #
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 15 years ago #

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 15 years ago #

teamwebb2008
Member

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

Posted 15 years ago #
yuniar

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

Posted 15 years ago #
miamiman
Member

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

Do you...?
Yes / No / Maybe

Thanks,

Posted 15 years ago #
yuniar

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

Posted 15 years ago #
LaMaison
Member

redityo,

Great mod.

Thanks

Posted 15 years ago #
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 14 years ago #
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 14 years ago #
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 14 years ago #
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 14 years ago #
yuniar

Hi tania,

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

Posted 14 years ago #
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 14 years ago #

RSS feed for this topic

1 2 3 Next »

Reply »

You must log in to post.