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. i.e. 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. i.e. 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>