Suggestion for BEF: Reduce default markup of form to allow labels of form fields to be positioned by side (not above) fields [#2075585]

At the moment there is heavily nested divs which make it extremely difficult to apply CSS (in a theme) to position the html label tag to be next to the input widget. At the moment the labels are above each input widget.

For usability (UX) reasons it would be nice to be able to place the labels to the side of each widget so that the form can be read left to right like a sentence e.g.

I'm looking for [pick one] in [place]

where [pick one] is a drop down menu exposed filter
and [place] is a text box

At the moment we have

I'm looking for     in
    [pick one]      [place]

which doesn't read so nice.

Is BEF the place for this formatting improvement or somewhere else?
Fences?
https://drupal.org/node/2075589
or
DS?
https://drupal.org/node/2075587

Comments

Comment #1

mikeker CreditAttribution: mikeker commented 16 October 2013 at 03:51

Status:

Active

» Closed (works as designed)

The ultimate culprit of randomly placed divs and floats is Views' decision to go outside the normal Form API for creating exposed filter forms. Honestly, that's the origin of this module -- if Views used the Form API, a bunch of hook_form_alter() calls would be enough to cover 90% of what BEF does!

Getting to your specific example, I believe you can style those by overriding Views' default styling. You'll just need greater specificity in your CSS than what Views includes (which is not very specific). In a worst case, you can use !important to force your styling over what Views' has dictated.

If that is not enough to fix this issue, please reopen and include specific HTML and CSS example (or a demo site). Thanks.