Download & Extend
Webform » Issues

Option for putting label and field on same line (inline)

Posted by woc_art on May 6, 2008 at 5:00pm
Project:Webform
Version:6.x-3.x-dev
Component:Code
Category:feature request
Priority:normal
Assigned:Unassigned
Status:closed (fixed)

Issue Summary

I found this code after days of searching and it works for me to get the labels and textfields on the same line:

/** WEBFORMS */
/** first set labels and items to appear next to each other */
.webform-component-textfield label,
.webform-component-select label,
.webform-component-select .form-item .form-checkboxes,
.webform-component-select .form-item .form-radios{
   display:inline;
}
.webform-component-select .form-item .form-checkboxes .form-item,
.webform-component-select .form-item .form-radios .form-item,
fieldset .webform-component-select .form-item .form-checkboxes .form-item,
fieldset .webform-component-select .form-item .form-radios .form-item
{
   display:inline;
   white-space: nowrap;
   padding-right:20px;
}
/** ELEMENTS TO APPEAR NEXT TO EACH OTHER */
.webform-component-fieldset div.form-item{
   display:inline;
   padding-right:20px;
   float:left;
}
.webform-component-fieldset div.form-item .form-item{
   position: absolute;
   left: 25px;
}

However I would like the text fields to look like this:

Label1: ________
Label2: ________
Label 10: ________

Right now it looks like this:

Label1: _________
Label10: _________
Labelexample: _________
Label2: _________

Can anyone help me out with this?

Thanks!

Login or register to post comments

Comments

#1

Posted by quicksketch on May 6, 2008 at 5:21pm

These look the same to me. Wrap your tags in <code> if you need to maintain spacing.

#2

Posted by woc_art on May 6, 2008 at 6:03pm

Sorry about that, I meant that the textfields are all aligned and aren't jaggedy.

kinda like this:

  • __________
  • __________
  • __________

regardless of the length of the labels

right now form looks like this:

label1: __________
label2example: __________
label3:  __________

Thanks for your quick reply!

#3

Posted by electronicmonkey on May 22, 2008 at 12:37pm

subscribing

#4

Posted by quicksketch on May 22, 2008 at 8:47pm

Just try out some CSS like this:

.webform-component-textfield label {
  float: left;
  width: 14em; /* Adjust for the width of your labels */
}

#5

Posted by electronicmonkey on May 22, 2008 at 9:30pm

Thanks , they are still quite staggered. Some are inline,, some not

#6

Posted by sapnac on July 26, 2008 at 11:03am

where do i paste the code above for webform. even i have the same allignment problem. which i am not getting it

#7

Posted by ar4 on October 5, 2008 at 12:52pm

thanks

#8

Posted by quicksketch on November 15, 2008 at 10:07pm
Title:Managed to get Label and Textfield on same line but can't align the textfield» Option for putting label and field on same line (inline)
Version:5.x-1.10» 5.x-2.3
Component:Miscellaneous» Code
Category:support request» feature request

I'm moving this to a feature request, to have this as an option in the Webform UI.

#9

Posted by danbuntu on November 22, 2008 at 9:19pm

Hi all

I've tweaked the given code to look like;

/** WEBFORMS */
/** first set labels and items to appear next to each other */
.webform-component-textfield label,
.webform-component-select label,
.webform-component-select .form-item .form-checkboxes,
.webform-component-select .form-item .form-radios{
   display:inline;
}

.webform-component-textfield label,
.webform-component-select label {

   display:inline;
   float: left;
}

.webform-component-select .form-item .form-checkboxes .form-item,
.webform-component-select .form-item .form-radios .form-item,
fieldset .webform-component-select .form-item .form-checkboxes .form-item,
fieldset .webform-component-select .form-item .form-radios .form-item
{
   display:inline;
   white-space: nowrap;
   padding-right:20px;
  
}
/** ELEMENTS TO APPEAR NEXT TO EACH OTHER */
.webform-component-fieldset div.form-item{
   display:inline;
   padding-right:20px;
   float:left;
}
.webform-component-fieldset div.form-item .form-item{
   position: absolute;
   left: 25px;
}

.webform-component-textfield label {
  float: left;
  width: 14em; /* Adjust for the width of your labels */
}

the check boxes now line up nicely with their labels and the text fields sit below their labels, which stops them becoming jagged.

However I've now got extra check boxes beside each component title. Any ideas on how to solve this?

#10

Posted by Dubber Dan on April 29, 2009 at 8:44pm

subscribing... great thread

#11

Posted by quicksketch on May 22, 2009 at 3:02am
Version:5.x-2.3»

Moving to 3.x version.

#12

Posted by dkruglyak on May 25, 2009 at 11:32am

Here is the simplest code for getting textfields in one row:

.webform-component-textfield {
   display:inline;
   padding-top:10px;
}
.webform-component-textfield .form-item {
   display:inline;
   white-space: nowrap;
   padding-right:20px;
}
.webform-component-textfield .form-item label {
   display:inline;
}

The question is if/how all the snippets in this thread could be rolled into the module

#13

Posted by zokazola on May 29, 2009 at 2:09pm

#14

Posted by reij on May 30, 2009 at 9:59pm

Could someone please tell me where exactly to put that code?

I tried putting it in the webform-form.tpl.php file in my theme directory but all I get is an error:
Parse error: syntax error, unexpected '/' in /home/a3252565/public_html/sites/all/themes/framework/webform-form.tpl.php on line 32

#15

Posted by quicksketch on May 31, 2009 at 12:45am

reij, it's CSS code, put it in your theme's style.css file (though you can put it in webform-form.tpl.php if you wrap it in <style></style> tags). I'd suggest you buy a book on basic CSS and HTML if you're not familiar with CSS. http://www.w3schools.com/css/default.asp is a good reference too.

#16

Posted by reij on May 31, 2009 at 2:53am

Thanks quicksketch, that worked!
Your right, I'm pretty new to web programming :)

#17

Posted by dvkd on June 2, 2009 at 5:09am

Hi quicksketch ,

I pasted the code which u told in style.css , but its not working still. (I use Inove theme), are there any way?

thanks

#18

Posted by dvkd on June 2, 2009 at 5:23am

hi ,

please i copied the code in style.css , but now working, what should i do? i am using drupal 6

#19

Posted by dkruglyak on June 2, 2009 at 6:05am

Try this module: http://drupal.org/project/css_injector

#20

Posted by dvkd on June 2, 2009 at 6:28am

Hi reij,

Can u please tell me how to display fields in inline.
i used this code but not working:
div.form-item label {
display:inline;
}

#21

Posted by djalloway on June 2, 2009 at 5:34pm

Taking a look into this myself.
Inline Fields would be excellent, I'll post a patch when I come up with one.

#22

Posted by quicksketch on June 2, 2009 at 6:17pm

I tried to take a stab at this when doing the (failed) #469782: Provide a Webform-specific Form Element Theming issue. It might be worth seeing how Wufoo implemented this same feature, but it looks like they simply add a class on the entire form to say whether elements are inline or not.

According to usability studies (as written by Luke Wroblewski) forms should never mix and match different displays for form elements within the same form. They should either all be label on left or label above, never mixed. I have to agree it does look strange having mixed form elements. So for both the sake of consistency and ease of implementation, this should be a form-level configuration option.

#23

Posted by djalloway on June 2, 2009 at 6:30pm

agreed, maybe referring to it as "Inline Fields" is a bit misleading, the only suitable approach for this is form-wide.
I have a few ideas on a clean integration for this and will try to get you all something to look at soon.

#24

Posted by Elijah Lynn on August 23, 2009 at 4:07pm

subscribing

#25

Posted by Elijah Lynn on August 23, 2009 at 4:36pm

According to usability studies (as written by Luke Wroblewski) forms should never mix and match different displays for form elements within the same form. They should either all be label on left or label above, never mixed. I have to agree it does look strange having mixed form elements. So for both the sake of consistency and ease of implementation, this should be a form-level configuration option.

Wow! I never knew there could be a whole book dedicated to webform design!

Thanks for posting this, it is some good wisdom.

#26

Posted by reaneyk on October 27, 2009 at 5:45pm

subscribing

#27

Posted by trinity1016 on November 2, 2009 at 10:15pm

Thanks for a good start. Here's what I ended up using:

/** puts labels and input fields on the same line and aligns them nicely */
.webform-component-textfield label,
.webform-component-date label,
.webform-component-email label,
.webform-component-file label {
   float: left;
   width: 14em;
}
/** puts each input option on the same line as its label (see attached image). */
.webform-component-select .form-item input{ 
   display: inline;  
   float: left;
   margin-left: 20px;
   margin-right: 5px;
}
AttachmentSize
drupal.jpg 38.05 KB

#28

Posted by ressa on November 25, 2009 at 4:46pm

Basically the same as the previous, but with textarea and width of the input fields added.

/** puts labels and input fields on the same line and aligns them nicely */
.webform-component-textfield label,
.webform-component-date label,
.webform-component-email label,
.webform-component-file label,
.webform-component-textarea label {
   float: left;
   width: 12em;
}
/** puts each input option on the same line as its label (see attached image). */
.webform-component-select .form-item input{
   display: inline; 
   float: left;
   margin-left: 20px;
   margin-right: 5px;
}
/** sets width for the input fields */
.webform-component-textfield input,
.webform-component-email input,
.webform-component-textarea textarea {
  width:20em;
}
AttachmentSize
webform_textfield_css.png 20.08 KB

#29

Posted by MPforce on December 7, 2009 at 9:23pm
Category:feature request» support request
Assigned to:Anonymous» MPforce

Great tip! The CSS makes sense. It should work, but it doesn't for me. Anyone know of any common problem with making this code work?

Thanks

#30

Posted by abhisheknagar on December 11, 2009 at 8:44am

I ended up using the below as my form contained email fields aswell

/** WEBFORMS */
/** first set labels and items to appear next to each other */
.webform-component-textfield label,
.webform-component-email label,
.webform-component-select label,
.webform-component-select .form-item .form-checkboxes,
.webform-component-select .form-item .form-radios{
   display:inline;
}


.webform-component-textfield label,
.webform-component-email label,
.webform-component-select label {

   display:inline;
   float: left;
}

.webform-component-select .form-item .form-checkboxes .form-item,
.webform-component-select .form-item .form-radios .form-item,
fieldset .webform-component-select .form-item .form-checkboxes .form-item,
fieldset .webform-component-select .form-item .form-radios .form-item
{
   display:inline;
   white-space: nowrap;
   padding-right:20px;
 
}
/** ELEMENTS TO APPEAR NEXT TO EACH OTHER */
.webform-component-fieldset div.form-item{
   display:inline;
   padding-right:20px;
   float:left;
}
.webform-component-fieldset div.form-item .form-item{
   position: absolute;
   left: 25px;
}

.webform-component-textfield label {
  float: left;
  width: 14em; /* Adjust for the width of your labels */
}left: 25px;
}
.webform-component-email div.form-item{
   display:inline;
   padding-right:20px;
   float:left;
}
.webform-component-email div.form-item .form-item{
   position: absolute;
   left: 25px;
}

.webform-component-email label {
  float: left;
  width: 14em; /* Adjust for the width of your labels */
}left: 25px;
}

#31

Posted by Brainwrap on February 18, 2010 at 4:24pm

thanks so much for this thread!

I used some of the suggestions above to get *most* of my form fields laid out the way I want them. However, I'm running into one very frustrating problem.

I want *some* types of "select" fields to appear next to the label (drop-down menus), but I want *other* "select" fields to appear below the label as normal (checkboxes & radio buttons).

Unfortunately, since all of these appear to fall under ".webform-component-select", it seems to be an all-or-nothing situation.

Part of the reason I want to do this is because I have one batch of 12 checkboxes which I'm using the Multicolumn Checkboxes Radios Weform module for to list them in 2 columns, but even without that I'd like to be able to have the checkbox fields laid out as they normally are.

One workaround is to change checkbox fields into a "multiple select list" box, but I've never liked those and they confuse a lot of people (since you have to hold down an extra key to select more than one, etc).

Any suggestions would be greatly appreciated.

#32

Posted by clang1234 on February 22, 2010 at 9:25pm

This is just about perfect for me but for some reason select components don't display correctly. What I would like is for two select radio buttons to be inline with one another.

Here's my form. The select field is at the bottom of the page right before the submit

http://www.indinsinfo.com/node/13

#33

Posted by theohawse on March 1, 2010 at 11:21pm
Category:support request» feature request
Assigned to:MPforce» Anonymous

Dammit guys, changing the CSS doesn't help me at all, and it's not a solution either,

the problem is that on big forms, the labels and data are all on separate lines.

much better solution to this would be to optionally wrap all the inputted data in <SPAN> tags, so when
a user copies and pastes the output data, it still appears inline.

This is how it's done in views, here's a sample of the html output that does this nicely, and stays inline no matter how you look at it. :

<div class="views-field-field-biz-fax-value">
  <label class="views-label-field-biz-fax-value">
    Fax:
  </label>
  <span class="field-content">
    (604) 580-0455
  </span>
</div>

So does anyone have a solution for this other than overriding the whole form template?

something like: if form inline textfields = yes then foreach textfield do this: <span class="?textfieldname"><!-- Original Textfield Output --></span>

#34

Posted by Scott M. Sanders on March 29, 2010 at 12:16pm
Version:» 6.x-3.x-dev

Subscribing

#35

Posted by cbearhoney on May 17, 2010 at 3:36pm

Subscribing

#36

Posted by coloryan on May 17, 2010 at 4:07pm

Is this what you're looking for? (see attached)

AttachmentSize
sample.png 23.11 KB

#37

Posted by Scott M. Sanders on May 19, 2010 at 2:48pm

Yes, that's what I was looking for, anyway.

#38

Posted by Summit on June 4, 2010 at 10:39am

Hi Coloryan, can you post your css to get #36?
thanks!
greetings, Martijn

#39

Posted by coloryan on June 7, 2010 at 7:15pm

Sorry for the delay, was focused on something else. I'll have this up in the next 24 hours for you.

#40

Posted by coloryan on June 8, 2010 at 5:00pm

Okay, I've got a working sample up here: http://mortgageriot.com/financial-advice/sample-form (It's not live, so feel free to play).

There are three forms in the attached zip file.

//
1. import-me.txt
2. form-formatting-helpers.tpl
3. webform-form-NID.tpl
//

Try this:

1. Find 'import-me' and paste that into node import.
2. Create a folder in your theme (I called it templates/insurance/travel on different sites) and put the other two files in there. On the file named webform-form-NID.tpl, replace NID with your node ID (the one created in step 1).
3. Test it and adjust as needed.

I recieved a huge amount of help from a friend and his site describes this process thoroughly and in greater detail. I'll ask him for permission to provide a link (he helped me out with the JS cough http://drupal.org/node/800870 cough).

AttachmentSize
webform.zip 11.25 KB

#41

Posted by wavesailor on October 6, 2010 at 11:19am

Anyone know how I can get a list of all the id's to be used for CSS formating? i.e. webform-component-xxx

#42

Posted by coloryan on October 6, 2010 at 3:25pm

Firebug? [http://getfirebug.com/]

#43

Posted by jimmb on December 4, 2010 at 3:07am

Hello, I'm glad to have found this thread, as I was having the same question. After some trial and error, this is the code which worked on my site:

.webform-component-textfield {
   display: inline;
}
.webform-component-textfield .form-item {
   display: inline;
   white-space: nowrap;
   padding-right: 20px;
}
.webform-component-textfield .form-item label {
   display: inline;
}

This looks good in every Mac browser I checked with, and also on every PC browser. Except IE 8 :(
For some reason, IE 8 is placing multiple fields on the same line, resulting in fields going off the right of the page.

I tried a bunch things to fix this in the CSS, but couldn't find a way. If anyone has any suggestions, I'd greatly appreciate it.

Jim

#44

Posted by sapox on December 13, 2010 at 1:19pm

Subscribing

#46

Posted by quicksketch on December 30, 2010 at 1:31am

This may not ever happen in Drupal 6 due to the limitations of the Drupal forms system in D6, but #1009240: Individual field inline-label support looks very promising for Drupal 7 (which natively supports inline labels).

#47

Posted by winston on January 17, 2011 at 1:06am

#40 worked extremely well for me for anyone stumbling on this issue.

It is also described in more detail here - http://1013.fi/cms/theming-drupal-web-forms

#48

Posted by mobonobomo on February 17, 2011 at 4:04am

The following ended up working very well for me:

/** ------------------------------- WEBFORM -------------------------------- **/

.webform-component label {
float: left;
width: 6em;
padding-top: 5px;
}

.webform-component input select {
display: inline;
margin-left: 20px;
margin-right: 5px;
}

Tested, and works in Chrome 9, Firefox 3, IE8, and Safari 5 (Windows 7), and Firefox 3 and Safari 5 (Mac OS X 10.5.8).

AttachmentSize
20110216_screenshot_webform-inline-fields-sample.png 6.82 KB

#49

Posted by mobonobomo on February 17, 2011 at 5:01am

I should have also noted that my implementation above was with Drupal 6.20, Webform 6.x-3.6.

#50

Posted by axon on March 18, 2011 at 6:41pm

sub

#51

Posted by quicksketch on May 13, 2011 at 10:32pm
Status:active» fixed

This feature for inline labels has been added as part of #1009240: Individual field inline-label support. We did end up taking the per-field support after all. Note that it still doesn't fix the "jagged" issue, which will still require specific CSS. Considering the difficulty of making a width that works perfectly in all situations, I don't think it's likely that we'll add any option for the "label width" or similar.

Let's please close this discussion out and start a new one to discuss evenly lining up options (or better start a handbook page), as this post now contains a lot of out-of-date information in the post-inline option version of Webform.

#52

Posted by System Message on May 27, 2011 at 10:41pm
Status:fixed» closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

#53

Posted by Akshita on August 31, 2011 at 8:15pm

Hi Abhishek

Could please let me know where did you place this code.

I created a customized css file /var/www/profiles/openpublic/themes/openpublic_theme/css/mycss.css but this did not work.

I copied ur code into /var/www/sites/all/modules/webform/css/webform-admin.css but this also did not work.

Please help.

Thanks in advance
Revathi

AttachmentSize
textfields.JPG 19.55 KB

#54

Posted by Akshita on August 31, 2011 at 8:16pm

This is not a fixed issue.Do not close.

#55

Posted by Akshita on August 31, 2011 at 8:17pm

Can you please help me in fixing this?

#56

Posted by SalvadorP on October 7, 2011 at 2:03pm

This worked for me.

.webform-component-fieldset div.form-item {
  display:inline;
  float:left;
}
.webform-component-fieldset div.form-item .form-item {
  position:inherit;
}

Hope it helps.

nobody click here