Semantic-ui: Split fields missing [bottom] margin on mobile

[daftspunk]

Issue summary

The docs state:

    <div class="ui form">
      <div class="fields">
        <div class="six wide field">
          <label>First name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="four wide field">
          <label>Middle</label>
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="six wide field">
          <label>Last name</label>
          <input type="text" placeholder="Last Name">
        </div>
      </div>
    </div>

Open the rendered docs in mobile resolution. Note that each field has zero [bottom] margin when swapping to full width.

Expectation

When viewing on mobile (inline styles for illustration purposes):

<div class="fields">
  <div class="field" style="margin-bottom: 1em"></div>
</div>

Actual

<div class="fields">
  <div class="field" style="margin-bottom: 0"></div>
</div>

Proposed fix (A)

Update documentation to explicitly declare how many fields a row will have. This fixes the issue with no code change.

    <div class="ui form">
      <div class="three fields"> <!-- This line has changed -->
        <div class="six wide field">
          <label>First name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="four wide field">
          <label>Middle</label>
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="six wide field">
          <label>Last name</label>
          <input type="text" placeholder="Last Name">
        </div>
      </div>
    </div>

Proposed fix (B)

Update form.less definition to include additional selectors, making the CSS match the example found in the documentation.

  .ui.form .fields > .fields,
  .ui.form .fields > .field,

Comments

Please advise which proposal is acceptable and if you would like a Pull Request.

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[kelchm]

This is still an issue.

I don't understand the purpose of the following: https://github.com/Semantic-Org/Semantic-UI/blob/deb275d2d5fe9a522a0b7bd8b6b6a1c939552718/src/definitions/collections/form.less#L938-L940

Removing this rule seems to have no negative impacts and resolves the issue.

[daftspunk]

It's interesting, I wasn't able to understand why its needed either, perhaps there is some other component that offsets it in mobile mode. Nonetheless, I just wrote a small CSS rule to work around it and everything was fine :)