Unable to reduce the size of the input field (form.control) with floating label in react in using re-CodePudding

I am trying to reduce the input field size(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. however I am not able to reduce the size of the input field.

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?

CodePudding user response：

Try .input-sm for the Form.Control className attributr. Note the lowercase "i" at the beginning.

CodePudding user response：

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;
}