Bulma: Addons field and label

Created on 2 Jun 2017 · 5Comments · Source: jgthms/bulma

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.4.2]
My browser is: Firefox/Chrome
I am sure this issue is not a duplicate (at least I couldn't find)

Description

When using label in a has-addons field, the label position is not set correctly.

Steps to Reproduce

Create a field like this

<div class="field has-addons">
    <label class="label">Label</label>
    <p class="control">
        <input class="input" type="text" placeholder="Find a repository">
    </p>
    <p class="control">
        <a class="button is-info">
            Search
        </a>
    </p>
</div>

A workaround for this is wrapping the .has-addons on a .field with the label:

<div class="field">
    <label class="label">Label</label>
    <div class="field has-addons">
        <p class="control">
            <input class="input" placeholder="Find a repository" type="text">
        </p>
        <p class="control">
            <a class="button is-info">
                Search
            </a>
        </p>
    </div>
</div>

Expected behavior

expected

Actual behavior

current

Source

rafaelpimpa

👍21

Most helpful comment

For those looking for a solution, try this:

<div class="field">
  <label class="label">Label</label>
  <p class="control">
    <div class="field has-addons"/>
      <p class="control">
        <input ... />
      </p>
      <p class="control">
        <a class="button" ... ></a>
      </p>
    </div>
  </p>
</div>

If you think in terms of your field with addons being a composite control, this approach makes loads of sense: wrap the addons field into another field that holds the label. This approach also allows the proper margin/padding/positioning of the label above the addon field, as well as any <p class="help"> elements you might have directly under the top-level control container, etc.

gdereese on 30 May 2018

👍22

All 5 comments

<div class="field">
    <label class="label">Label</label>
</div>

<div class="field has-addons">
    <p class="control">
        <input class="input" type="text" placeholder="Find a repository">
    </p>
    <p class="control">
        <a class="button is-info">
            Search
        </a>
    </p>
</div>

jgthms on 4 Jun 2017

😕29 👍6 👎4

margin-bottom is not the same though. This works better...

<label class="label">Label</label>

<div class="field has-addons">
    <p class="control">
        <input class="input" type="text" placeholder="Find a repository">
    </p>
    <p class="control">
        <a class="button is-info">
            Search
        </a>
    </p>
</div>

thanks for the framework btw

cloud-tribal on 13 Aug 2017

👍11 🚀1

For those looking for a solution, try this:

<div class="field">
  <label class="label">Label</label>
  <p class="control">
    <div class="field has-addons"/>
      <p class="control">
        <input ... />
      </p>
      <p class="control">
        <a class="button" ... ></a>
      </p>
    </div>
  </p>
</div>

gdereese on 30 May 2018

👍22

For those looking for a solution, try this:
<div class="field">
  <label class="label">Label</label>
  <p class="control">
    <div class="field has-addons"/>
      <p class="control">
        <input ... />
      </p>
      <p class="control">
        <a class="button" ... ></a>
      </p>
    </div>
  </p>
</div>
If you think in terms of your field with addons being a composite control, this approach makes loads of sense: wrap the addons field into another field that holds the label. This approach also allows the proper margin/padding/positioning of the label above the addon field, as well as any <p class="help"> elements you might have directly under the top-level control container, etc.

Thanks for the solution!
I had problem with the input width not taking all the space available but fixed adding is-expanded to it.

hiagorios on 11 Oct 2019

For those looking for a solution, try this:
<div class="field">
  <label class="label">Label</label>
  <p class="control">
    <div class="field has-addons"/>
      <p class="control">
        <input ... />
      </p>
      <p class="control">
        <a class="button" ... ></a>
      </p>
    </div>
  </p>
</div>
If you think in terms of your field with addons being a composite control, this approach makes loads of sense: wrap the addons field into another field that holds the label. This approach also allows the proper margin/padding/positioning of the label above the addon field, as well as any <p class="help"> elements you might have directly under the top-level control container, etc.

Awesome, thanks. Would change the first p.control to a div though as a div should not be inside a p