MachForm Community Forums » MachForm 2

1. webcommerce
   Member

   I have used the following code to get the radio buttons in line:

   #li_18 label.choice{
   display:inline;
   position:relative;
   margin-left; 0.2em;
   _top:0.2em;
   }

   #li_18 input.radio{
   display:inline;
   margin-left: 0.2em;
   }

   That works .... but

   how do I get each button description closer to the button itself? At present the descriptions appear way to the right of each button.

   Also, can I get the multiple choice description on the same line as the buttons themselves: so everything is on just one line?

   Any help appreciated.
   Thanks.
   Ron S

   Posted 15 years ago #
2. 

   redityo

   Hi Ron,

   Try to adjust "margin-left" properties value smaller, for example :

   "margin-left; -0.1em;"

   it should make the description more closer between each options. and to make your options label in the same line, you can add this to your css :

   #li_18 label.description {
   	float: left !important;
           width:30% !important;
   }

   adjust the width value to get a proper result. If you want to make all label in the same line, try to follow this post :

   http://www.appnitro.com/forums/topic/label-038-input-box-on-same-lin?replies=9

   ---

   MachForm Support

   Posted 15 years ago #

3. webcommerce
   Member

   Thanks for your advice.

   I tried out a different field with the following code:

   #li_28 label.description{
   float:left !important;
   width:5% !important;
   }

   #li_28 label.choice{
   display:inline;
   position:relative;
   margin-left; -0.2em;
   _top:0.2em;
   }

   #li_28 input.radio{
   display:inline;
   margin-left: 0.2em;
   }

   Result: the description and input buttons are on the same line. Great!
   However, the button descriptions are stll way out to the right and the placement looks terrible. I tried the '-x.xem' going from 2.0 to -2.0 in stages. It only appears to shift the description even further away.

   I tried changing .choice and .radio separately and together, no joy!

   I checked out the other reference you quoted but the changes I made in the label.description and textarea.textarea didn't seem to make any difference.

   At this point I'm only working in the form using View Form to see results. I'm really stumped on this. Cannot see what else to do.

   Regards,
   Ron S

   Posted 15 years ago #

4. webcommerce
   Member

   I'm still having a real problem with this : getting the radio button descriptions closer. Can anyone help please.

   Ron S

   Posted 15 years ago #

5. Saghalie
   Pro Member

   I've tried this out with 2 radio groups with 3 radio buttons

   Using:
   #li_1 label.description {
   float: left !important;
   width:20% !important;
   }

   #li_2 label.description {
   float: left !important;
   width:20% !important;
   }

   I had no issues getting them lined up. With 3 buttons in each group it looked like
   this:

   Multiple Choice 1 () First Choice
   () Second Choice
   () Third Choice

   Multiple Choice 2 () First Choice
   () Second Choice
   () Third Choice

   This is pretty much the way it looks. Can you link your form so we can see what is happening?

   Thanks,

   Saghalie

   Posted 15 years ago #

6. Saghalie
   Pro Member

   imagine the Second and Third choice lined up with the first choice. Silly forum...

   Posted 15 years ago #

RSS feed for this topic

Reply

You must log in to post.