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


  1. prajwalrao
    Member

    Is this possible easily? If yes can anyone shed some light please..

    Thanks..

    Posted 12 years ago #
  2. yuniar

    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 12 years ago #
  3. prajwalrao
    Member

    Thank you so much. That worked like a charm... :)

    Posted 12 years ago #
  4. yuniar

    Sounds great!


    MachForm Founder

    Posted 12 years ago #
  5. xlawdog
    Member

    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 12 years ago #
  6. teamwebb2008
    Member

    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 11 years ago #
  7. bgordon
    Member

    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 11 years ago #
  8. Freddy
    Member

    Nice trick! What if we would like to do this only for a specific field?

    Posted 11 years ago #
  9. yuniar

    Simply target the container list id for that field.
    Example:

    #li_3 label.description{
    	width: 30%;
    	float: left;
    }

    MachForm Founder

    Posted 11 years ago #
  10. awarner20
    Member

    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 11 years ago #
  11. awarner20
    Member

    ...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 11 years ago #
  12. dmoorehaverfordedu
    Member

    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 11 years ago #
  13. awarner20
    Member

    @ dmoorehaverfordedu

    ...as Grandma used to say, "Close only counts in horseshoes, dancing, and hand grenades."

    Thanks for the help! :)

    Posted 11 years ago #
  14. user885987211
    Member

    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 8 years ago #
  15. yuniar

    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 8 years ago #
  16. crubio
    Member

    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?

    http://www.cfs-spf-services.com/ddapprovals/view.php?id=1

    Posted 8 years ago #
  17. yuniar

    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=94


    MachForm Founder

    Posted 8 years ago #

RSS feed for this topic

Reply