One-wide form fields do not stack properly
Author: likuilinCreated Feb 15, 2025Updated Feb 15, 2025
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:
.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.
Source: Semantic-Org/Semantic-UI