Different height between FormControl and ControlLabel in react-bootstrap

Question

I am making a label + form as follows:

<Form horizontal>
  <FormGroup>
    <Col xs={5} className="xxx">
      <ControlLabel>
        somekey:
      </ControlLabel>
    </Col>
    <Col xs={7} className="yyy">
      <InputGroup>
        <FormControl value="v"/>
        <InputGroup.Button>
          <Button>
            km
          </Button>
        </InputGroup.Button>
      </InputGroup>
    </Col>
  </FormGroup>
</Form>

However, it seems like the height of the the ControlLabel part is different from InputGroup part, after I added a background-color as shown in the attached image. Am I doing something wrong?

Answer 1

I dont think you are doing anything know, this is how bootstrap works,

React bootstrap uses version bootstrap v3,

I have replicated your code example by using plain HTML, CSS and bootstrap v3 CSS.

Open the snippet in fullscreen mode

In the following example u can see that, there is some space below the label indicated by green background color

Horizontal forms should never be used on small devices. ie You should use sm instead of xs so that on small screen it becomes vertical form for good UX.

 .column-color { background-color: red; } .form-group-color { background-color: green; } .form-horizontal.centered .control-label { margin: 0; padding: 0; vertical-align: middle; line-height: 34px; } .centered-flex { display: flex; } .centered-flex .control-label { display: block; flex: 1; width: 140px; padding-right: 10px; } .centered-flex .input-group { flex: 5; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <form class="form-horizontal"> <div class="form-group form-group-color"> <div class="col-xs-2 text-right column-color"> <label for="inputEmail3" class="control-label ">Email</label> </div> <div class="col-xs-10"> <div class="input-group"> <input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">km</span> </div> </div> </div> </form> <br/> <p>Horizontal forms should never be used on small devices. ie You should use sm instead of xs, so that on small screen it becomes vertical form</p> <form class="form-horizontal "> <div class="form-group form-group-color"> <div class=" col-sm-2 text-right column-color"> <label for="inputEmail3" class="control-label ">Email</label> </div> <div class="col-sm-10"> <div class="input-group"> <input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">km</span> </div> </div> </div> </form> <br/> <p>Vertically Centered using line-height method</p> <form class="form-horizontal centered"> <div class="form-group form-group-color"> <div class=" col-sm-2 text-right column-color"> <label for="inputEmail3" class="control-label ">Email</label> </div> <div class="col-sm-10"> <div class="input-group"> <input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">km</span> </div> </div> </div> </form> <p>Centered using flex</p> <form class="form-horizontal "> <div class="form-group form-group-color centered-flex"> <label for="inputEmail3" class="control-label column-color">Email</label> <div class="input-group"> <input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">km</span> </div> </div> </form> 

Answer 2

react-bootstrap FormGroup works by adding the form-group class to the DOM element. By default, bootstrap form-group doesn't mean to support adjacent, row - columns display, you will need to add extra row class to make it work properly.

With bootstrap only:

<div class="form-group row">...</div> 

With react-bootstrap :

<FormGroup className="row">
</FormGroup>