Label & Input box on same line « HTML Form Builder Online , PHP Form Creator

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 |

prajwalrao
Member

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

Thanks..

Posted 16 years ago #

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 16 years ago #

prajwalrao
Member

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

Posted 16 years ago #
yuniar

Sounds great!
MachForm Founder

Posted 16 years ago #
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 16 years ago #
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 16 years ago #
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 15 years ago #
Freddy
Member

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

Posted 15 years ago #
yuniar
Simply target the container list id for that field.
Example:
```
#li_3 label.description{
	width: 30%;
	float: left;
}
```
MachForm Founder
Posted 15 years ago #

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

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

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

awarner20
Member

@ dmoorehaverfordedu

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

Thanks for the help! :)

Posted 15 years ago #
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 13 years ago #
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 13 years ago #
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 12 years ago #
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 12 years ago #

RSS feed for this topic

Reply

You must log in to post.