CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nbokmans
nbokmans

Reputation: 5747

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) 

.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;
}
<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 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>

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

Upvotes: 2

Views: 1046

Answers (5)

R&#233;my Testa
R&#233;my Testa

Reputation: 897

Ok so you just need to add margin-top: 10px and margin-bottom: 10px to your div inside the col-lg-9

Upvotes: 0

zurricanjeep
zurricanjeep

Reputation: 38

remove the 10px margin-top from your checkbox class or add it to the othediv. I think this is what cause your offset. :)

Upvotes: 0

Syed Huzaifa Hassan
Syed Huzaifa Hassan

Reputation: 796

Well the solution of your problem is to create three separate rows and one row spanning total 12 columns, for which you will use 3 for one checkbox and other for your notification or message. So each message and check box will be bundled together in container or row class. Will provide code shortly, if you don't understand what I am trying to say

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 2

Neil
Neil

Reputation: 400

The answer you are probably searching is just changing the line or font height in your lg9 div

or using only one column, with checkbox and label having a constant width

Upvotes: -1

Related Questions