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 17 years ago by EricM | 41 posts |

« Previous 1 2 3 Next »

redityo
I did't see any custom CSS code in your form, have you try to put these code in your CSS form ?
```
#li_3 label.choice {
	display:inline;
	position:relative;
	margin-left: 0.2em;
	_top:0.2em;
}

#li_3 input.radio {
	display: inline;
	margin-left: 0.5em;
}
```
Anyway to see machform version, simply open your "changelog.txt" file and you can see the latest version in the bottom of the file
MachForm Support
Posted 15 years ago #
davidvictory
Member

I have that code in the css..http://login.comfortkeepers.com/machform/data/form_5/css/view.css

still no luck..

Posted 15 years ago #
redityo
I see.. I found HTML "BR" tag on each choices label in there and that's why you can't get the radio button on the same line.

Try to edit your form and select that "choice" field, you should see "BR" tag on choice label like this
```
Finalist 2 <br />
```
Then remove "BR" tag from there
MachForm Support
Posted 15 years ago #
hylevy19
Member
GETTING RADIO BUTTONS TO PRINT ALL ON ONE LINE

I pity those who beat their head against a wall like I did and tried everything.

I did solve it. Was too simple.

Situation was I had 200 questions with radio buttons for yes, no, maybe answers.
I wanted them alongside each other on same line as the question. FF worked fine then tried IE (Moz 4.0) and Safari. Was disgusting. Here's the final code I used (also note
I was generating dynamic html using php so if someone says it won't work, it's not true.)

The key was using the horrid
```
<pre> and </pre>
```
tags. I know with CSS this may be looked on in disfavor, but in this case it was the simplest solution. 2 lines of code.

This generates 200 lines of questions from a table. Maybe later I will upgrade it to a
MySQL application but the questions never change. Also notice use of the <<< notation so I can specify my own delimiter so I don't have to use those nasty backslashes to escape everything to the point where you can't read it.
```
foreach($Q_text as $item => $text)
{
 $trim_text = trim($text);
 echo <<<delim
<tr>
<pre>
  <td class="left">
      <input type="radio"  class="radio" name="answer[$item]" value="+" />
      <label class="left">+</label>
      <input type="radio"  class="radio" name="answer[$item]" value="M"  />
      <label class="left">M</label>
      <input type="radio"  class="" name="answer[$item]" value="-"  />
      <label class="left">-</label>
  </td>
    <td width="750" class="question" valign="top" >
      <label>$trim_text</label>
 </td>
</pre>
</tr>
delim;
}
```
This is sort of what it looks like (except I couldn't copy the buttons, only the labels of + (yes), M (maybe) and - (no),

+ M - 1) Do you make thoughtless remarks or accusations which later you regret?

Hope this helps you.
Posted 15 years ago #
yuniar

hylevy19 -- thank you for sharing the tips. I've fixed your code formatting.
MachForm Founder

Posted 15 years ago #
msfbiz
Member

I have tried the different CSS modification solution to get my radio buttons to align properly, but with no success.

Only part of the second radio button is on the same line as the first one.
The label and image are pushed underneath.

You can see the form here: http://www.stopsmokingfrance.com/commande.php

Any help would be appreciated.

Posted 15 years ago #
yuniar
mfsbiz,

first of all, I think you need to set the width of your form to be wider.
change your css code:
```
.order_form {
	margin-right: auto;
	margin-left: auto;
	padding-right: 20px;
	padding-left: 20px;
	width: 660px;
}
```
adjust the width to be something like 860px or so.

Then remove the <br /> tag in front of your image tag.

Then add align="absmiddle" attribute to each of your images.

That should align all of them within one line.
MachForm Founder
Posted 15 years ago #
abcrobots
Member

I was originally confused because I thought that the #li number would be the number of the field in the admin backend. I did a quick "view source" and found the code related to the element in question, and updated my form to match the real ID# and now everything works. Hope this helps everyone!

Posted 15 years ago #
seasonseg
Member

I'm having trouble getting the check boxes to appear on the same line for the limousine / party bus services quote for I have on my site. I'm trying to get 2 vehicle names to appear per line so it can cut that portion of the form in half. Please view http://seasonseventgroup.com/vehicle.php?vid=1 and let me know what I'm doing wrong or how to get them side by side.

Also does anyone know how to get links to appear in the text on certina portions of a text field as I've been trying to do this as well for the Terms & Conditions section at the bottom of the form to show my terms and conditions page when clicked.
I look forward to anyones advise as it is much apreciated.

Posted 14 years ago #

yuniar

Try to edit your CSS and add this block of code:

#li_24 label.choice, #li_25 label.choice,
#li_29 label.choice, #li_28 label.choice,
#li_27 label.choice, #li_26 label.choice {
	display:inline;
	position:relative;
	margin-left: 0.2em;
	_top:0.2em;
}

#li_24 input.checkbox, #li_25 input.checkbox,
#li_29 input.checkbox, #li_28 input.checkbox,
#li_27 input.checkbox, #li_26 input.checkbox {
	display: inline;
	margin-left: 0.5em;

}

To get the Terms & Conditions become a link, simply use the HTML tag to create the link.
It should be something like this:

I Agree and Accept" all <a href="http://www.seasonseventgroup.com/tac.php">Terms & Conditions</a>

MachForm Founder

Posted 14 years ago #

seasonseg
Member

Thank you for the update!

I am still have one problem. I'm trying to get the check boxes to have 2 or 3 vehicles listed per line in a set form so they aren't all over the place. Is there a way to make it sort of like a table so it'll display 2 - 3 vehicles per row but lined up one under another with the check boxes centered to the left so all the boxes are in a row?

Posted 14 years ago #
yuniar

Have you tried the code I posted above?
MachForm Founder

Posted 14 years ago #
seasonseg
Member

I tried the code you posted above but had to take it off because it simply tried to fit as many check boxes per line rather then having an orderly row of check boxes with 2 per line only.

Please let me know if you know of any other ways?

Posted 14 years ago #
djones
Member

I would like to use this radio buttons on the same line to provide Scale & Grid form elements. Just one line of 1,2,3,4,5 and then a number of radio buttons under each column.

Posted 14 years ago #
seasonseg
Member

I still haven't received a reply to my question above. Please help me when someone is available. Thank you very much :)

Posted 14 years ago #
yuniar

seasonseg -- you can use the table code modification as posted here:
http://www.appnitro.com/forums/topic/radio-buttons-on-same-line?replies=35#post-3502

If you are having difficulty, please contact us directly and send us your view-functions.php file.

We'll help you with the code.
MachForm Founder

Posted 14 years ago #
sulapanidhummi
Member

I am new to this forum. I have prepared a form using MachForm. I have placed radio buttons and check boxes in row format by following the advice by Mr.YUNIAR. The output is available at the URL: www.runnynoseremedy.org/evalform.html I request FORUM members /MachForm support team to see the form and suggest, if any further improvement is required ( thru email to: info[a]runnynoseremedy.org )

I hereby, invite all the members to visit my website: www.runnynoseremedy.org which is all about World’s first genuine remedy for allergic runny nose at zero-cost.
Sulapani V Dhummi

Posted 14 years ago #
yuniar

sulapani -- I see that you have few modules within your form.
I suggest to use "Section Break" field to put the module header.

It looks nicer and should split your form much better than using the label.
Also, if you need to make your form shorter, you can align some of those fields into one line.

Check this post for more instruction on this:
http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line?replies=85
MachForm Founder

Posted 14 years ago #
sulapanidhummi
Member

Hi YUNIAR, Thanks
I did it as suggested by you successfully (www.runnynoseremedy.org/evalform.html ). Now, I want to make fonts BOLD, in SECTION BREAK row and fonts in the fields from bold to NORMAL. 1) How to do that. 2)Is it possible to change font color. 3) Is it possible to change back-ground color of SECTION BREAK row to a desired color. Kindly guide me, thanks in advance!!!

Posted 14 years ago #
yuniar
sulapani,

To set the font in section break to bold, change this code:
```
form .section_break h3
{
	font-size:120%;
	background-color:#bfcffe;
	font-weight:400;
	line-height:130%;
	margin:0 0 2px;
}
```
to become:
```
form .section_break h3
{
	font-size:120%;
	background-color:#bfcffe;
	font-weight:700;
	line-height:130%;
	margin:0 0 2px;
}
```
to change the font color, simply add the color property there as well. Regarding the background color, I see that you have it correct already now?
MachForm Founder
Posted 14 years ago #

RSS feed for this topic

« Previous 1 2 3 Next »

Reply »

You must log in to post.