I am trying to reduce the height of the input field (form control). I am using floating labels with the form controls. I am using react-bootstrap with react. I have tried to reduce the size using the size="sm" and I have also the className="Input-sm". I have also added className="input-sm" to the Form.Control based on the answer posted below. However I am not able to reduce the size of the input field.
I am using the default input field from the react-bootstrap. I am not trying to reduce the size of the floating label text. I am not trying to reduce the width of the input field Form.Control.
Below is the code for the input field( Form Control)
<FloatingLabel
controlId="floatingInput"
label="Last name"
className="mb-3"
type="text"
>
<Form.Control
size="sm"
type="text"
className="Input-sm"
placeholder="Last name"
/>
</FloatingLabel>
This did not work for me. What should I do to reduce the size of the input field?
In the case of floating labels, the size of the input isn't really governed by the size prop, or by manually adding className='form-control-sm'. Note that adding a class of input-sm doesn't do anything that I'm aware of.
.form-floating>.form-control {
padding: 1rem 0.75rem;
}
.form-floating>.form-control, .form-floating>.form-select {
height: calc(3.5rem + 2px);
line-height: 1.25;
}
.form-control-sm {
min-height: calc(1.5em + 0.5rem + 2px);
/* padding: 0.25rem 0.5rem; Cancelled out by .form-floating */
font-size: .875rem;
border-radius: 0.2rem;
}
Having a look at what happens to the CSS if you add .form-control-sm looks like it only really affects the padding, and is over-ridden by the .form-floating class. Forcing the padding via !important just makes the input text alignment go to the left which looks a bit janky.
In order to make the input smaller, you'll need to experiment with the height and line-heights:
.form-floating>.form-control, .form-floating>.form-select {
height: calc(3.5rem + 2px);
line-height: 1.25;
}