MachForm Community Forums » MachForm 2

1. cheryledwards
   Member

   I know there has been a lot about this topic but because some responses are so long it gets very confusing, particularly when it doesn't work out. May I please have a "fresh" response to my question:

   I would like all radio buttons on my form to be on the same line as the label, and I would like all the radio buttons lined up for all the questions on the form.

   Posted 13 years ago #

2. christopherbrooks
   Member

   I followed this with no problem, taken from the other post:

   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.

   Posted 13 years ago #

3. cheryledwards
   Member

   Thank you Christopher. That helped with aligning the radio buttons, but I also wanted the radio buttons aligned with the label. The following is the additional solution kindly provided by Appnitro, which works excellently!

   To make the form field label on the same line with the options. Search for this code :

   label.description {
   border: medium none;
   color: #222222;
   display: block;
   font-size: 95%;
   font-weight: 700;
   line-height: 150%;
   padding: 0 0 1px;
   }

   and change it to

   label.description {
   border: medium none;
   color: #222222;
   display: block;
   font-size: 95%;
   font-weight: 700;
   line-height: 150%;
   padding: 0 0 1px;
   float: left;
   width:80%;
   }

   Posted 13 years ago #

RSS feed for this topic

Reply

You must log in to post.