Bulma: Horizontal form labels are too short.

[ArtemKolichenkov]

This is about Bulma.

This is a Question

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma 0.7.1
My browser is: Chrome 65.0.3325.181
I am sure this issue is not a duplicate? | Did my best to look into issues/google

Description

I am not sure how to properly display horizontal forms with long labels (e.g. >3 words or long string of text). It seems that the input itself expands into all available space, but the label has only tiny portion in the container and has space mostly for quite short labels.

This forced me to use some weird hacks like separating label and input into separate columns to have more control on the area they take. Needless to say it triples the amount of html for a simple form and becomes a mess really quickly.

Is there something I'm missing that allows to expand the label in a form? is-expanded doesn't work on labels, so I'm quite lost.

Steps to Reproduce

Expected behavior

I was expecting something like this (made this codepen just as an approximate example
https://codepen.io/sciencesamovar/pen/WJONzR

Actual behavior

Input takes majority of space leaving label crumbled into a tiny box
https://codepen.io/sciencesamovar/pen/YLQzYb

[JeremieBou]

I found two ways to make it work using grouped fields. This is probably the way to go since you have multiple fields, and the docs say to use is-grouped or has-addons for child elements. It took a lot of playing around, so it's definitely a bit hard to use. Not sure if it's met to be that hard to use.

The first method is the easiest, and that is just remove all the horizontal form code. The issue with this one is, it's not as responsive, so when you shrink the screen is doesn't stack like the normal horizontal form does. I think it still looks fine since you're just putting a number. You can probably also play around with is-expanded and is-narrow.

<section class="section">
  <div class="container">
    <div class="field is-grouped">
      <div class="field-label">
        <label class="label">Number of elements in array</label>
      </div>
      <p class="control is-expanded">
         <input class="input" placeholder="18">
      </p>
      <div class="field-label">
        <label class="label">Number of instances</label>
      </div>
      <p class="control  is-expanded">
        <input class="input" placeholder="841">
      </p>
    </div>
  </div>
</section>

CodePen

The second is to use the grouped fields with the horizontal form, which is the one that took a lot of playing around to get it to work. This does stack when the screen is shrunk, but doesn't look as nice. You can probably play around with it a bit more for it to be perfect.

<section class="section">
  <div class="container">
    <div class="field is-horizontal">
        <div class="field-body">
          <div class="field is-grouped">          
              <div class="field-label is-normal">
                <label class="label">Number of elements in array</label>             
            </div>          
              <p class="control is-expanded">
               <input class="input" placeholder="18">
              </p>
          </div>     
      </div>

        <div class="field-body">
          <div class="field is-grouped">          
              <div class="field-label is-normal">
                <label class="label">Number of instances</label>             
            </div>          
              <p class="control is-expanded">
               <input class="input" placeholder="841">
              </p>
          </div>     
      </div>   

    </div>

  </div>
</section>

CodePen

[bcswartz]

I ran into this same problem. I found that I could make the label wider if I used CSS to apply a min-width on the block with the "field-label" class, but for some reason that removed or disrupted the normal margin-bottom set on the block with the "is-horizontal" block (leaving no space between the text input I needed the wider label for and the one below it).

But that margin-bottom seems to be consistent at 0.75rem, so I created the following CSS declarations:

.hz-label-150 div.field-label {
  min-width: 150px;
}

.hz-label-200 div.field-label {
  min-width: 200px;
}

.hz-label-250 div.field-label {
  min-width: 250px;
}

.hz-label-300 div.field-label {
  min-width: 300px;
}

.hz-label-150 div.field.is-horizontal,
.hz-label-200 div.field.is-horizontal,
.hz-label-250 div.field.is-horizontal,
.hz-label-300 div.field.is-horizontal
{
  margin-bottom: 0.75rem;
}

Then I could apply one of the "hz-label-" classes to the form to make all of the labels the same width. The vertical stacking looks normal with a smaller screen size, though I only tested that by shrinking my browser window.

[thecristen]

Leaving my workaround here in case this helps someone. My use case happened to be pretty simple. .my-custom-class can be applied to the relevant form or section to isolate this change and not affect every form everywhere.

@media screen and (min-width: 769px), print {
  .my-custom-class .field-label {
    flex-grow: 2; /* overwrites previous value of 1 */
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.