How can I decrease input height with floating labels?

user_18942674 0
Viewed 291

How can I decrease input height with floating label? I tried putting size but it didn't work.

<Col xs={5} md={2}>
  <FloatingLabel
      size="sm"
      controlId="floatingInput"
      label="Cod do Produto"
      className="mb-2 "
      style={{ fontSize: '14px' }}
  >

    <Form.Control type={"text"}
        size="sm"
        value={InputCodigo}
        name={"Data"}
        onChange={(e) => setInputCodigo(e.target.value)}
        autoComplete={'off'}
        placeholder={"Cod do Produto"} />
  </FloatingLabel>
</Col>
react-bootstrap bootstrap-4 reactjs
1 Answers

You'll probably need some custom CSS, which should probably be applied globally for consistency. Something like this should do. It reduces the input height from 58px to 42px.

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
  padding: 0rem 0.75rem;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
  height: calc(2.5rem + 2px);
  line-height: 1;
}

.form-floating>label {
  padding: 0.5rem 0.75rem;
}

enter image description here

FYI, all I did for this solution is inspect the official demo and play with the styles until I got it to work.

user_12648040
Related