Switch Form Layout Depending on Screen Size
titouandk opened this issue · comments
Prerequisites
- I have searched for duplicate or closed feature requests
- I have read the contributing guidelines
Proposal
It would be nice to be able to easily adapt forms layout depending on screen size.
Labels would be on the side of inputs on large screens:
Labels would be on top of inputs on small screens:
Current implementation
The above example, switching between those 2 layouts, has been implemented as follows:
<div class="mb-3 mb-md-1 row">
<label for="selectRole" class="col-form-label col-12 col-md-3 text-md-end">
Role
</label>
<div class="col-12 col-md-9">
<select id="selectRole" class="form-select">
<option value="admin">Admin</option>
</select>
</div>
</div>
The problem
This way of doing things requires to use col-form-label
instead of form-label
on our label. This adds an extra-padding to the top of the label, breaking the spacing when the label is displayed on top of the input.
video.mov
Proposed solution
An ideal solution would be to allow the behavior of our label to change based on the screen size. Our label could behave like a form-label
on vertical layouts (small screens), and behave like a col-form-label
only on horizontal layouts (larger screens).
Maybe by adding a breakpoint parameter in the class name: col-md-form-label
. The behavior of the label would be form-label
until the md
breakpoint, and col-form-label
above it.
Motivation and context
Adapting forms to mobile devices.