0

I am trying to use a FloatingLabel component alongside an InpuGroup component of the react-bootstrap package. I am able to get the inputs grouped but the height of the InputGroup.Text is greater than the FloatingLabel input.

Weird CSS when using FloatingLabel with InputGroup components of react-bootstrap

enter image description here

<InputGroup>
    <FloatingLabel label="Email Address" className="mb-3">
        <Form.Control id="floatingEmail" type="email" name="email" placeholder="email" value={person.email} onChange={updatePersonDetails} />
    </FloatingLabel>
    <InputGroup.Text>@crestdatasys.com</InputGroup.Text>
</InputGroup>

Is there any known solution or workaround to fix the CSS? Or am I making some mistake with calling the components in wrong order?

James Z
  • 12,209
  • 10
  • 24
  • 44
Dhyey Patel
  • 1
  • 1

0 Answers0