Appnitro Software Forums » MachForm

Label & Input box on same line

(13 posts)
  • Started 2 years ago by prajwalrao
  • Latest reply from awarner20

  1. prajwalrao
    Member

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

    Thanks..

    Posted 2 years ago #

  2. yuniar
    MachForm Founder

    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.

    Posted 2 years ago #

  3. prajwalrao
    Member

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

    Posted 2 years ago #

  4. yuniar
    MachForm Founder

    Sounds great!

    Posted 2 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 2 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 1 year 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 1 year ago #

  8. Freddy
    Member

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

    Posted 1 year ago #

  9. yuniar
    MachForm Founder

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

    #li_3 label.description{
	width: 30%;
	float: left;
}
    Posted 1 year 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 1 year 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 1 year 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 1 year ago #

  13. awarner20
    Member

    @ dmoorehaverfordedu

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

    Thanks for the help! :)

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.