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 17 years ago by EricM | 41 posts |
-
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 17 years ago # -
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=7You can see the custom CSS at the bottom of this file:
http://www.appnitro.com/forms/data/form_7/css/view.cssSo 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 17 years ago # -
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 16 years ago # -
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 16 years ago # -
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 EffectPosted 16 years ago # -
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 16 years ago # -
Very much appreciated! thank you. worked just right.
Posted 16 years ago # -
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 16 years ago # -
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 16 years ago # -
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 # -
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 # -
Sorry guys, but how do you easily set up a horizontal radio button series?
Do you...?
Yes / No / MaybeThanks,
Posted 15 years ago # -
Have you tried the above CSS code? That should do it.
MachForm Founder
Posted 15 years ago # -
redityo,
Great mod.
Thanks
Posted 15 years ago # -
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 numbersPosted 15 years ago # -
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 15 years ago # -
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 15 years ago # -
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 15 years ago # -
Hi tania,
You can always login to our customer area and download machform package there :)
MachForm Founder
Posted 15 years ago # -
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 #
Reply »
You must log in to post.