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
Label & Input box on same line
Started 16 years ago by prajwalrao | 17 posts |
-
Is this possible easily? If yes can anyone shed some light please..
Thanks..
Posted 16 years ago # -
I haven't test this a lot yet, but it might be a good start.
Edit the CSS of your form, search for this block:
label.description { border:none; color:#222; display:block; font-size:95%; font-weight:700; line-height:150%; padding:0 0 1px; }
Add width and float attribute to that code, so it become:
label.description { border:none; color:#222; display:block; font-size:95%; font-weight:700; line-height:150%; padding:0 0 1px; width: 30%; float: left; }
That should align most of the labels and input to be the same line.
Next, search for this block:
textarea.textarea { background:#fff url(../../../images/shadow.gif) repeat-x top; border-bottom:1px solid #ddd; border-left:1px solid #c3c3c3; border-right:1px solid #c3c3c3; border-top:1px solid #7c7c7c; color:#333; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:100%; margin:0; width:99%; }
Change the width to be 50% instead of 99%, this should fix the paragraph alignment.
MachForm Founder
Posted 16 years ago # -
Thank you so much. That worked like a charm... :)
Posted 16 years ago # -
Sounds great!
MachForm Founder
Posted 16 years ago # -
I used this style for a couple of my forms and also aligned the label text to the right. I added width and float to label.description, and also added text-align: right. Instead of reducing the width of the input, I added rules for li.div - float: right and width x%. I haven't tested it in all browsers, but it works so far in the ones I have tested.
Posted 16 years ago # -
Awesome!! That fixed some of my concerns. The form is truly coming together. Now if I could only get things like the phone number and other input fields on the same line as maybe the name, etc. That would really be great!! I may need to go in and manually do this, but hope I don't. Good grief Yuniar you are truly making me lazy ;)) lol. EXCELLENT product.
Posted 15 years ago # -
There is a great FREE tool called Firebug available for FireFox browsers that allows you to click/hover over page components and see what CSS is controlling it and test edit it and see the results live... it also shows you what line and on what css file you need to modify. It might help you in playing with styles and results online... Just my two cents worth...
Posted 15 years ago # -
Nice trick! What if we would like to do this only for a specific field?
Posted 15 years ago # -
Simply target the container list id for that field.
Example:#li_3 label.description{ width: 30%; float: left; }
MachForm Founder
Posted 15 years ago # -
Just a note that after reading this post, I was able to the label and inputs on the same line for specific fields on my form.
Thanks to all who help out here! Here's some example of my CSS...
/*Item 10 Description*/ #li_10 label.description{ width: 85%; float: right; } /*Item 10 Input Box*/ #li_10 input.small{ width:10%; float: left; } /*Item 11 Description*/ #li_11 label.description{ width: 85%; float: right; } /*Item 11 Input Box*/ #li_11 input.small{ width:10%; float: left; }
Posted 15 years ago # -
...turns out I have over 40 elements to style like the above. Can I specify more than one #li at a time?
I tried this:
/*Item 11 Description*/ #li_11, #li_12, #li_13 label.description{ width: 85%; float: right; } /*Item 11 Input Box*/ #li_11, #li_12, #li_13 input.small{ width:10%; float: left; }
...but that didn't work.
Can someone give any advice?
Posted 15 years ago # -
You were close
Should be this
/*Item 11 Description*/ #li_11 label.description, #li_12 label.description, #li_13 label.description{ width: 85%; float: right; } /*Item 11 Input Box*/ #li_11 input.small, #li_12 input.small, #li_13 input.small{ width:10%; float: left; }
Posted 15 years ago # -
@ dmoorehaverfordedu
...as Grandma used to say, "Close only counts in horseshoes, dancing, and hand grenades."
Thanks for the help! :)
Posted 15 years ago # -
Hello,
I don't undustand the difference between the label & input box and the radio buttons or checkboxes.
1° Are radio buttons en checkboxes the same thing ?
2° Have radio buttons a round shape ?
3° Have checkboxes a square shape ?Because the modofications you proposed don't give anything.
Can you help me for the multiple choices and checkboxes, word utilised on the backoffice or interface.
On which level do I have to do the modification, first level directly the CSS om the soft or second level CSS on the back office ?
Thank you for your help
Best regards
Posted 12 years ago # -
Radio buttons and checkboxes are different. Radio buttons are the one with round shape. You can only select one choice at a time with radio button.
Can you explain more regarding the modification you would like to have please?
I'm not sure if I understand it correctly.MachForm Founder
Posted 12 years ago # -
My form has a lot of labels with check boxes and the form is very long. Is there a way to put my labels and check boxes in two columns?
Posted 12 years ago # -
Yes, you can implement the CSS as posted here:
http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line?replies=94MachForm Founder
Posted 12 years ago #
Reply
You must log in to post.