Appnitro Software Forums » MachForm

Label & Input box on same line

(5 posts)
  • Started 9 months ago by prajwalrao
  • Latest reply from xlawdog

  1. prajwalrao
    Member

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

    Thanks..

    Posted 9 months 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 9 months ago #

  3. prajwalrao
    Member

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

    Posted 9 months ago #

  4. yuniar
    MachForm Founder

    Sounds great!

    Posted 9 months 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 9 months ago #

RSS feed for this topic

Reply

You must log in to post.