Search code examples
htmlcssflexboxbulma

Bulma Inconsistent Input Width

enter image description hereI have a simple form that is using the Bulma framework. I am getting inconsistent input widths and can't find a remedy. https://jsfiddle.net/onzpum90/ It seems to happen when the labels are long. If I kept short labels the problem is gone. Why is the label affecting the input width? May be a flexbox issue that I am not familiar with. Anyone know of a solution?

<form action="">
<div class="field">
<div class="field-body">
  <div class="field">
    <p class="control is-expanded">
      <label class="label">A very long label for a form</label> 
      <input type="text" name="" value="" class="input ">
     </p>
  </div> 
  <div class="field is-grouped">
    <p class="control is-expanded">
      <label class="label">Email</label>
      <input type="email" name="email" value="" class="input ">
    </p>
  </div>
  </div>
 </div>
 <div class="field is-horizontal">
<div class="field-body">
  <div class="field">
    <p class="control is-expanded">
      <label class="label">Short Label</label> 
      <input type="text" name="" value="" class="input ">
     </p>
  </div> 
  <div class="field is-grouped">
    <p class="control is-expanded">
      <label class="label">Email</label>
      <input type="email" name="email" value="" class="input ">
    </p>
   </div>
  </div>
 </div>
</form>
Solution

  • The div containers for the form elements (.field) are flex items sized with flex-grow: 1.

    @media screen and (min-width: 769px), print
.field-body > .field:not(.is-narrow) {
    -webkit-box-flex: 1;
    flex-grow: 1;
}

    Although you've defined flex-grow, you haven't defined flex-basis. As a result, flex-basis remains at its default setting: auto.

    With flex-basis: auto, container space is distributed proportionally among items based on the length of their content.

    Hence, items with longer labels will be longer in length.

    You can fix the problem by simply setting flex-basis to 0.

    Remove the flex-grow and flex-shrink rules applied to .field and use this instead:

    flex: 1 1 0

    which is the same as:

    flex: 1

    revised demo

    For a complete explanation of the difference between flex-basis: auto vs flex-basis: 0, see this post: Make flex-grow expand items based on their original size