Message/help text of horizontal field is placed in wrong element

[Herteby]

Overview of the problem

Buefy version: 0.6.2
Vuejs version: 2.5.13
OS/Browser:Linux Mint/Chrome

Description

According to Bulma, message/help text for horizontal forms should be placed like this:

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Email</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control"></div>
      <p class="help">HELP TEXT</p> <!-- In the inner field -->
    </div>
  </div>
</div>

But in Buefy they are placed like this:

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Email</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control"></div>
    </div>
  </div>
  <p class="help">HELP TEXT</p> <!-- In the outer field -->
</div>

This causes major issues in horizontal forms.

Steps to reproduce

<b-field horizontal label="Label" message="helper text">
  <b-input/>
</b-field>

Expected behavior

Bulma:

Actual behavior

Buefy:

[Herteby]

This workaround seems to work for now:

<b-field horizontal label="Label">
  <b-field message="helper text">
    <b-input/>
  </b-field>
</b-field>

[fer-ri]

confirmed ..

example from docs https://buefy.github.io/#/documentation/field

[fer-ri]

@Herteby wrapping with nested <b-field> seems like the best solution for now.

Thanks

[rafaberaldo]

Can you take a look @electrolinux ?

[electrolinux]

Yep! Working on it right now...

[electrolinux]

See PR: #521

Added a little note in documentation: