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>

[thepra]

...ok, what's going on this issue that has been open for around 4 years and no progress was made from 0.4.0 to 0.9.2?

The workarounds aren't even that much appropriate because they assume that there's always a single input field in that addon when in reality you can have N inputs, each with it's validation message to trigger and show.

Thinking about it, a fix to this issue might require some new way to write addons that accounts for such scenarios and imply a breaking change going forward. Luckily we are stil at pre-1.0 version, so such change shouldn't be as impactful as it would be after 1.0.

[shreve]

Hey folks. I just stumbled on this issue and thought I'd toss in my two cents.

This is the workaround I'm using now with nested fields:

<div class="field">
    <label class="label">Uniqname</label>
    <div class="field has-addons">
        <div class="control is-expanded">
            <input class="input" type="text" value={user.uniqname} disabled />
        </div>
        <p class="control">
            <a class="button is-static">@umich.edu</a>
        </p>
    </div>
    <p class="help">This field is supplied by the university, and is unchangeable.</p>
</div>

This is what I would like to have be the solution:

<div class="field">
    <label class="label">Uniqname</label>
    <div class="control has-addons">
        <input class="input" type="text" value={user.uniqname} disabled />
        <a class="button is-static">@umich.edu</a>
    </div>
    <p class="help">This field is supplied by the university, and is unchangeable.</p>
</div>

And all it really requires is supporting .has-addons on .control in addition to .field, and a little bit of tweaking of the selectors of .button, .input, .select select underneath it. I think this semantically makes more sense because the field control is what has addons, not necessarily the field itself.

I am very new to the source code of this project (I've been a user for a while, but haven't looked inside), but if this doesn't conflict with the design philosophy or anything like that, I'd be happy to work on a PR.