Page 1 of 1
Display radio buttons side by side with label underneath
Posted: Thu Jun 28, 2007 8:20 pm
by ethical
Hi guys,
I am trying to style a radio button group using the form builder and CSS to display a radio button group (of 10 options 1-10) and i want them to appear all on the same line with the label underneath the respective button? Like a survey question/
e.g. (where o = radio button)
o o o o o o o o o o
1 2 3 4 5 6 7 8 9 10
is this possible? also is it possible to add a smiley face at each end of the group?
using the latest formbuilder and 1.0.8 cmsms
OR is it possible to just build my own form using the fckeditor and if so how do i call the mailler?
thanks
john
Re: Display radio buttons side by side with label underneath
Posted: Thu Sep 13, 2007 11:03 am
by LaZzOo
Does anyone have any input in this matter?
I'm wondering the same thing.. since my css-skills are quite poor..
Re: Display radio buttons side by side with label underneath
Posted: Fri Sep 14, 2007 4:21 pm
by SideshowBob
Hi,
I've never used form builder but the code below will produce what you want. Assuming form builder can create similar code then it's just a case of applying the style.
Code: Select all
<style type="text/css">
div#survey input {margin:0; padding:0;}
div#survey label {width:2em; padding:0; margin:0; float:left; text-align:center}
</style>
</__body>
<div id="survey">
<label for="RadioGroup1_0">
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0" /><br />
1</label>
<label for="RadioGroup1_1">
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1" /><br />
2</label>
<label for="RadioGroup1_2" >
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_2" /><br />
5</label>
<label for="RadioGroup1_3">
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_3" /><br />
7 </label>
<label for="RadioGroup1_4">
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_4" /><br />
8</label>
<label for="RadioGroup1_5">
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_5" /><br />
10</label>
</div>
<__body>
You might want to tweak the padding and margins slightly but you get the idea.
HTH,
Bob
Re: Display radio buttons side by side with label underneath
Posted: Fri Sep 14, 2007 11:04 pm
by michelG
Bob,
It's a treat to see CSS applied so nicely. Many would have made it very complicate. Well worth a karma!
Michel
Re: Display radio buttons side by side with label underneath
Posted: Sat Sep 15, 2007 9:51 am
by SideshowBob
aww, thanks!
