Bulma: Add "column style" sizes to field-label

[danielhgasparin]

This is a enhancement/feature suggestion.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.5.1

Description

Add modifiers like the column sizes to the field-label, for example: "is-one-third", "is-half", "is-4", etc.

Expected behavior

I expect to be possible to modify the width of the field-label portion of a "field is-horizontal", in relation to the field-body.

Like this:

<div class="field is-horizontal">
  <div class="field-label is-one-third">
    <!-- label taking one third of the total container size -->
  </div>
  <div class="field-body">
    <!-- control taking two thirds of the total container size -->
  </div>
</div>

Trying to make this in my project, but not sure yet if I'm breaking something.

[apocalyarts]

+1

Have been using this a lot in Bootstrap to ensure that form inputs are one line only, even with longer labels.

[jgthms]

Have you tried using columns instead?

[apocalyarts]

If columns are the solution, wouldn't that make "form-horizontal" obsolete?

[danielhgasparin]

I tried using columns and it worked, but needed some workaround.

The label needed two additional classes: "has-text-left-mobile" and "has-text-right-tablet", because the label needs to be aligned right, except on mobile, where the label appears on top of the control. And will be needed that new feature "variable gap" (only on version 0.5.2) set to "is-1" or "is-2", because the horizontal-form has a smaller gap than the columns default.

[keithn]

I have the same kind of problem, also similar to https://github.com/jgthms/bulma/issues/434 where the label column is just not quite wide enough that the alignment is broken and need to give labels more room

[glococo]

+1 Columns on fields
(+1 is-mobile on "field" class to keep horizontal on mobile)

My workaround was to limit each custom input element to inline style="width: 100%;max-width: 500px;"

[mgmarlow]

Would love to see the is-mobile class applied to field-body. As it stands, the behavior is inconsistent with the framework.

[jamesvl]

I've tried using columns for this, but it doesn't quite work -

• if a put a column within the div.field, the changes the spacing between the label and the form control (adds vertical space)
• if I put a column around the entire div.field, then the label also needs to fit, when I only wanted the form control to follow the size

Okay: I can add <div class="columns is-gapless"><div class="column is-XXX">... around every control... admittedly, that works. It just feels like a lot of extra elements and classes for something that could(?) be directly part of the div.control