Bulma: Help message for input with addons

[matthijssm]

Overview of the problem

• [x] This is about the Bulma CSS framework
• [x] I'm using Bulma version [0.4.0]
• [x] My browser is: Chrome
• [x] I am sure this issue is not a duplicate?

Description

Showing a help message for a input with addons is not showing correctly in a horizontal form. As you can see in the picture below it it acts like the text is an addon. If it's possible to fix this with some extra html it would be nice to find it back in the docs.

Steps to Reproduce

1. Create horizontal form
2. Add input with addon
3. Show help message.

Expected behavior

The help message is shown under the input just like the rest of the form.

Actual behavior

The help message is shown as an addon.

[JoshZA]

Encountering this 👍

[johanvanhelden]

Same issue here with v0.6.2.

[rbluethl]

Same problem here with 0.6.2

[taylorhoward92]

Same problem with v0.6.2

[alexsasharegan]

Seems like the parent .field.has-addons needs something to add flex-wrap: wrap;, and then make the .help trigger it with something like width: 100%.

Here's my fix (ignore the Vue.js syntax):

.flex-wrap { flex-wrap: wrap; }
.w-100 { width: 100%; }

<form @submit.prevent="handleSubmit">
  <div class="field has-addons flex-wrap">
    <p class="control">
      <a class="button is-static">#</a>
    </p>
    <div class="control is-expanded">
      <input type="text"
             class="input"
             :class="{ 'is-danger': job_id_state == ValidState.Invalid }"
             id="job-id"
             placeholder="Job Number"
             ref="job_input"
             v-model="job_id_str">
    </div>
    <div class="control">
      <button type="submit"
              :disabled="fetching"
              class="button is-info">Search</button>
    </div>
    <p class="help is-danger w-100"
       v-show="job_id_state == ValidState.Invalid">
      The job number is invalid.
    </p>
  </div>
</form>

[ahstro]

Not to be a bummer, but your solution still leaves the border-radius of, in your case, the search button squared instead of rounded.

Here's (a simpler version of) the workaround I used to solve this issue in our code. It's in Elm, but it isn't too dissimilar to HTML or JSX. It essentially creates a wrapper .field around the .field.has-addons and makes the .help a sibling, instead of a child, of the latter, then removes a margin-bottom of .field:not(:last-child)s.

.without-margin {
  margin-bottom: 0;
}

Html.div
    [ Attributes.class Bulma.field ]
    [ Html.div
        [ Bulma.Helpers.classList
            [ Bulma.field
            , Bulma.hasAddons
            , "without-margin"
            ]
        ]
        [ Html.div
            [ Attributes.class Bulma.control ]
            [ Html.input
                [ Attributes.class Bulma.input ]
                []
            ]
        , Html.div
            [ Attributes.class Bulma.control ]
            [ Html.button
                [ Bulma.Helpers.classList
                    [ Bulma.button
                    , Bulma.isStatic
                    ]
                ]
                [ unit ]
            ]
        ]
    , Html.p
        [ Attributes.class Bulma.help ]
        [ Html.text helpText ]
    ]

Edit: Worth noting, I have no idea if this is idiomatic Bulma. Please scream at me if not :innocent:

[cemulate]

I'm experiencing this with Bulma 0.7.1.

The workarounds are fine, but is there any plan for a fix?

Here's a minimal JSFiddle

[xpuu]

@alexsasharegan Thanks for the quick fix. Border-radius my a** to be honest, without the fix it's not there anyway. It would be really great to have it fixed properly though.

[yahtnif]

Try this: https://jsfiddle.net/j7oun3hk/

Nested .field:

<div class="field">
  <div class="field has-addons">
    <p class="control is-expanded">
      <input class="input" type="text" value="Input">
    </p>
    <p class="control">
      <a class="button is-primary">Addon</a>
    </p>
  </div>
  <p class="help is-danger">Danger!</p>
</div>

Remove margin-bottom in nested .field:

.field .field {
  margin-bottom: 0;
}

[mrg0lden]

@yahtnif A smart work-around, thanks!

[yannux]

@yahtnif Smart ! Thanks.

In the same kind we can put help inside control, no need of is-expanded

Using this with vertical form

<div class="field">
    <label class="label" for="password">Password</label>
    <div class="field has-addons">
        <div class="control">
            <input type="password" id="password" name="password" class="input" required="required">
            <div class="help"><strong>8</strong> caractères minimum</div>
        </div>
        <div class="control"><button type="button" class="button" data-action="toggle-password" data-target="password">Show</button></div>
    </div>
</div>