Form field sizing
Created by: WinterSilence
Prerequisites
-
I have searched for duplicate or closed feature requests -
I have read the contributing guidelines
Proposal
- checkbox/switch, radio, range inputs and textareas don't have sizing classes as
form-control-sm
andform-control-lg
. grouply:
<div class="form-check form-check-sm mb-3">
<!-- + "form-check-input-sm" -->
<input class="form-check-input" type="checkbox" id="remember-me">
<!-- + "form-check-label-sm" -->
<label class="form-check-label" for="remember-me">Remember me</label>
</div>
or directly:
<div class="form-check mb-3">
<input class="form-check-input form-check-input-sm" type="checkbox" id="remember-me">
<label class="form-check-label form-check-label-sm" for="remember-me">Remember me</label>
</div>
- input color with sizing class
form-control-*
have wrong height:<input type="color" class="form-control form-control-sm form-control-color">
- 35px,<input type="text" class="form-control form-control-sm">
- 31px - input width (css
width
,min-width
andmax-width
) by attributesminlength
,maxlength
orsize
: ifmaxlength="250"
iswidth:100%
, thenmaxlength="100"
iswidth:40%
i.e.100 / (250 / 100)
or by size(step size: 10):input[size="10"]
isinput{min-width:10em;}
,input[size="20"]
isinput{min-width:20em;}
- There are no classes that allow to set size for all controls, labels and buttons in form/fieldset by default like as:
<!-- class "form-sm" similar to adding classes to elements: -->
<form class="form-sm">
<div class="row mb-3">
<!-- + "col-form-label-sm" -->
<label for="email" class="col-2 col-form-label">Email</label>
<div class="col-10">
<!-- + "form-control-sm" -->
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="row mb-3">
<!-- + "col-form-label-sm" -->
<label for="password" class="col-2 col-form-label">Password</label>
<div class="col-10">
<!-- + "form-control-sm" -->
<input type="password" class="form-control" id="password">
</div>
</div>
<!-- + "btn-sm" -->
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Motivation and context
- Setting size for any control, label or button in form
- Setting size for inner controls, labels and buttons by container(form/fieldset/row) class