https://www.machform.com/forums/ MachForm Community Forums Topic: Label & Input box on same line en Tue, 05 May 2026 00:12:32 +0000 https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-13243 Fri, 20 Jan 2012 15:10:28 +0000 yuniar 13243@https://www.machform.com/forums/ <p>Yes, you can implement the CSS as posted here:<br /> <a href="http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line?replies=94" rel="nofollow">http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line?replies=94</a> </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-13234 Fri, 20 Jan 2012 02:22:17 +0000 crubio 13234@https://www.machform.com/forums/ <p>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?</p> <p><a href="http://www.cfs-spf-services.com/ddapprovals/view.php?id=1" rel="nofollow">http://www.cfs-spf-services.com/ddapprovals/view.php?id=1</a> </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-12974 Mon, 05 Dec 2011 22:32:14 +0000 yuniar 12974@https://www.machform.com/forums/ <p>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.</p> <p>Can you explain more regarding the modification you would like to have please?<br /> I'm not sure if I understand it correctly. </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-12966 Sun, 04 Dec 2011 17:41:19 +0000 user885987211 12966@https://www.machform.com/forums/ <p>Hello,</p> <p>I don't undustand the difference between the label &#38; input box and the radio buttons or checkboxes.</p> <p>1° Are radio buttons en checkboxes the same thing ?<br /> 2° Have radio buttons a round shape ?<br /> 3° Have checkboxes a square shape ?</p> <p>Because the modofications you proposed don't give anything. </p> <p>Can you help me for the multiple choices and checkboxes, word utilised on the backoffice or interface.</p> <p>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 ? </p> <p>Thank you for your help </p> <p>Best regards </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-6623 Sat, 18 Jul 2009 03:06:16 +0000 awarner20 6623@https://www.machform.com/forums/ <p>@ dmoorehaverfordedu</p> <p>...as Grandma used to say, "Close only counts in horseshoes, dancing, and hand grenades."</p> <p>Thanks for the help! :) </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-6622 Sat, 18 Jul 2009 02:36:58 +0000 dmoorehaverfordedu 6622@https://www.machform.com/forums/ <p>You were close</p> <p>Should be this<br /> <pre><code>/*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; }</code></pre> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-6619 Fri, 17 Jul 2009 23:43:43 +0000 awarner20 6619@https://www.machform.com/forums/ <p>...turns out I have over 40 elements to style like the above. Can I specify more than one #li at a time?</p> <p>I tried this:<br /> <pre><code>/*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; }</code></pre> <p>...but that didn't work.</p> <p>Can someone give any advice? </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-6601 Thu, 16 Jul 2009 08:00:29 +0000 awarner20 6601@https://www.machform.com/forums/ <p>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.</p> <p>Thanks to all who help out here! Here's some example of my CSS...</p> <pre><code>/*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; }</code></pre> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-4464 Thu, 29 Jan 2009 11:12:17 +0000 yuniar 4464@https://www.machform.com/forums/ <p>Simply target the container list id for that field.<br /> Example:</p> <pre><code>#li_3 label.description{ width: 30%; float: left; }</code></pre> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-4457 Thu, 29 Jan 2009 03:08:24 +0000 Freddy 4457@https://www.machform.com/forums/ <p>Nice trick! What if we would like to do this only for a specific field? </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-4315 Fri, 16 Jan 2009 21:47:51 +0000 bgordon 4315@https://www.machform.com/forums/ <p>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... </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-3904 Sat, 06 Dec 2008 01:03:50 +0000 teamwebb2008 3904@https://www.machform.com/forums/ <p>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. </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-693 Thu, 31 Jan 2008 22:31:47 +0000 xlawdog 693@https://www.machform.com/forums/ <p>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. </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-687 Thu, 31 Jan 2008 15:09:52 +0000 yuniar 687@https://www.machform.com/forums/ <p>Sounds great! </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-684 Thu, 31 Jan 2008 01:13:57 +0000 prajwalrao 684@https://www.machform.com/forums/ <p>Thank you so much. That worked like a charm... :) </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-682 Wed, 30 Jan 2008 11:23:10 +0000 yuniar 682@https://www.machform.com/forums/ <p>I haven't test this a lot yet, but it might be a good start.</p> <p>Edit the CSS of your form, search for this block:</p> <pre><code>label.description { border:none; color:#222; display:block; font-size:95%; font-weight:700; line-height:150%; padding:0 0 1px; }</code></pre> <p>Add <strong>width</strong> and <strong>float</strong> attribute to that code, so it become:<br /> <pre><code>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; }</code></pre> <p>That should align most of the labels and input to be the same line.</p> <p>Next, search for this block:</p> <pre><code>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:&quot;Lucida Grande&quot;, Tahoma, Arial, Verdana, sans-serif; font-size:100%; margin:0; width:99%; }</code></pre> <p>Change the <strong>width</strong> to be 50% instead of 99%, this should fix the paragraph alignment. </p> https://www.machform.com/forums/topic/label-038-input-box-on-same-lin#post-674 Wed, 30 Jan 2008 02:09:42 +0000 prajwalrao 674@https://www.machform.com/forums/ <p>Is this possible easily? If yes can anyone shed some light please..</p> <p>Thanks.. </p>