Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

input field with has-addons doesn't play nice with labels #3935

Open
benjamin-dreux opened this issue Nov 9, 2024 · 0 comments
Open

input field with has-addons doesn't play nice with labels #3935

benjamin-dreux opened this issue Nov 9, 2024 · 0 comments

Comments

@benjamin-dreux
Copy link

This is about Bulma | the Docs.

It's a bug that doesn't tie to a specific bowser. It can be reproduce with chrome or firefox.

Overview of the problem

This is about the Bulma CSS framework

Description

When creating a form field that has an addons, the controls are put on the same line as the label itself, even if the labels of this form are supposed to be one line upper.

Steps to Reproduce

<form class="form">
  <div class ="field has-addons">
    <label class ="label">Requested amount</label>
    <p class="control">
      <span class="select">
        <select>
          <option>$</option>
          <option>£</option>
          <option>€</option>
        </select>
      </span>
    </p>
    <p class="control">
      <input class="input" type="text" placeholder="Amount of money">
    </p>
    <p class="control">
      <button class="button">
        Transfer
      </button>
    </p>
  </div>
</form>

Expected behavior

label should be on a distinct line than the inputs by them self

Actual behavior

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant