nbokmans nbokmans - 2 years ago 40
CSS Question

Aligning a checkbox and text in two different columns

I am working on a display where there are 3 checkboxes. When one of these checkboxes is triggered, a message or input field should appear. I got that part working, but the checkbox and the message are not aligned as shown in the image below

unaligned text

As you can see the "Ondertiteling" checkbox is not aligned with the text "Ondertitel enabled".

This is my code (with the toggling of the message ommitted for the question's sake)

<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span>Aanvraag #1</span>
<i class="fa fa-remove pull-right icon-clickable"></i>
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Ondertitels</label>
</div>
<div class="checkbox">
<label><input type="checkbox">Vertaling</label>
</div>
<div class="checkbox">
<label><input type="checkbox">Voice-overs</label>
</div>
</div>
<div class="col-lg-9">
<div>Ondertitel enabled</div>
<div>Vertaling enabled</div>
<div class="text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
</div>
</div>
</div>
</div>
</div>
</div>


Relevant css (from bootstrap):

.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}

.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}


How can I align the text to be on the same height as the checkbox? Thanks in advance.

Answer Source

I would ask to change your markup to fix the formatting so that bootstrap will handle it for us. Change the markup into rows such as this:

    <div class="row">
      <div class="col-lg-3">
        <div class="checkbox">
          <label><input type="checkbox">Vertaling</label>
        </div>
      </div>
      <div class="col-lg-9">
        <div class="checkbox">Vertaling enabled</div>
      </div>
    </div>

See demo below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
          <span>Aanvraag #1</span>
          <i class="fa fa-remove pull-right icon-clickable"></i>
        </h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-lg-3">
            <div class="checkbox">
              <label><input type="checkbox">Ondertitels</label>
            </div>
          </div>
          <div class="col-lg-9">
            <div class="checkbox">Ondertitel enabled</div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3">
            <div class="checkbox">
              <label><input type="checkbox">Vertaling</label>
            </div>
          </div>
          <div class="col-lg-9">
            <div class="checkbox">Vertaling enabled</div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3">
            <div class="checkbox">
              <label><input type="checkbox">Voice-overs</label>
            </div>
          </div>
          <div class="col-lg-9">
            <div class="checkbox text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download