Skip to content

One-wide form fields do not stack properly #7155

@likuilin

Description

@likuilin

Forms with one-wide fields do not stack properly:

<form class="ui form">
  <div class="fields">
    <div class="one wide field">
      <label>one wide</label>
      <input type="text" value="one wide" />
    </div>
    <div class="two wide field">
      <label>two wide</label>
      <input type="text" value="two wide" />
    </div>
    <div class="three wide field">
      <label>three wide</label>
      <input type="text" value="three wide" />
    </div>
  </div>
</form>

This is because this CSS is missing the one-wide case:

/* Swap to full width on mobile */
@media only screen and (max-width : @largestMobileScreen) {
.ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
.ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
.ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,
.ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,
.ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,
.ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,
.ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,
.ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field,
.ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field {
width: @oneColumn !important;
}
.ui.form .fields {
margin-bottom: 0em;
}
}

  .ui.form:not(.unstackable) .fields:not(.unstackable) > .one.wide.field,

Are one-wide fields supposed to stack on mobile through some other mechanism? If not, I think the above line should be added so that they behave like all the others.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions