1

This is an age-old debate in Drupal, and I am surprised this has not been asked before on Drupal Answers. Maybe I missed it.

By default, Drupal form labels are always displayed at the top of form elements.

How can I display form element labels to the left (or right) of the element, instead of at the top?

I am talking about entity edit forms, but also other forms.

I am sure I will find a solution with hook_form_alter() or on the theme layer. But the question is, what is a convenient and maintainable way to do this?

I am personally working with Bootstrap theme, but a generic answer is preferable, so others can benefit too.

EDIT: It also would be nice to have an elegant way to control which forms this should apply to, and where it should not. Since I added this later, it should be considered optional.

UX background

The main argument for labels at the top is that they are supposedly easier to read. E.g. here, http://www.wunderkraut.com/blog/why-top-aligned-labels-are-better-in-drupal-forms/2010-12-28

I personally think this is an answer to the wrong question. The form labels might be easier to read this way. But if you look at a pre-filled form, e.g. when editing an entity, then usually the field values are far more interesting than the labels. Often the labels are already evident from the field value. E.g. a street name looks like a street name. An email looks like an email.

And of course with labels on the side the form will look more compact and less cluttered, and more of it will fit "above the fold".

Another design option would be in-field labels. But with these, the label is completely gone when the field is filled out. You may still want the labels to make sure that every value is in the correct field.

So having labels on the side is a valid design goal..

1 Answer 1

1

As when it comes to theming stuff, you should always ask your self: Can I do this with CSS? The answer in this case is yes.

label { float: left padding-right: 3px; }

Example

OR (probably best to go with)

label { display: inline }
input { display: inline }

Example 2

You will need to add the css code to your administration theme .css file.

6
  • With this css, the elements will not be nicely aligned, I'm afraid.
    – donquixote
    Commented Mar 19, 2016 at 19:30
  • with display: inline method it should be
    – No Sssweat
    Commented Mar 19, 2016 at 19:31
  • How so? Different labels will have different width. I guess the solution would be either an explicit width setting on the label, or something with display:table-cell..
    – donquixote
    Commented Mar 19, 2016 at 19:33
  • Also: This would apply to all labels throughout the site. This can be intended, or maybe it's not. It is possible to target specific forms with more specific css.. I'm not sure this is the best possible solution, but it is a solution.
    – donquixote
    Commented Mar 19, 2016 at 19:35
  • And why the admin theme? To let this apply to forms on the admin side? Fair point. I was more interested in user-facing forms, but I did not say this.
    – donquixote
    Commented Mar 19, 2016 at 19:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.