-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Open
Description
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:
Semantic-UI/src/definitions/collections/form.less
Lines 910 to 942 in 597843a
/* 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
Labels
No labels