Twitter Bootstrap Question posted in

How to position checkbox label-Twitter bootstrap

I am trying to position my checkbox label to a certain position using margin-top: 15px; but for some reason, it’s getting applied only to checkbox not the label but at the same time margin-right: 20px; is getting applied to the label.

$(function() {
  $('#lstStates').multiselect({});
});
.multiselect-container label input {
  margin-right: 20px;
  margin-top: 15px;
}

.multiselect-container>li>a {
  padding: 12px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

<select size="5" name="lstStates" multiple="multiple" id="lstStates">
  <option value="NJ">New Jersey</option>
  <option value="NY">New York</option>
  <option value="OH">Ohio</option>
  <option value="TX">Texas</option>
  <option value="PA">Pennsylvania</option>
  <option value="GG">asdfa</option>
  <option value="AW">jghjh</option>
  <option value="AE">qwer</option>
</select>

Fiddle

Tags:

4

Answers


  1. 0

    Add Margin label 

    .multiselect-container label {
  margin-top:15px;
}

    http://jsfiddle.net/mkgjc8ub/

    Login or Signup to reply.
  2. 0

    It’s override by bootstrap css

    just add this:

    .multiselect-container>li>a>label.checkbox, 
.multiselect-container>li>a>label.radio {
    margin-top:15px
}

    http://jsfiddle.net/can9key3/

    Login or Signup to reply.
  3. 0

    I am trying to position my checkbox label to a certain position using margin-top: 15px; but for some reason, it’s getting applied only to checkbox not the label

    Your selector only matches the input, it doesn’t match the label.

    at the same time margin-right: 20px; is getting applied to the label.

    No, it isn’t.

    Putting a margin on the right of the input moves whatever is to the right hand side of that away.

    What is on the right-hand side is the text inside the label. So that text is moved.

    The label itself doesn’t get a right margin.

    Since the input is inside the label, you need to apply your margin to the label, but since the stylesheet for the library you are using explicitly sets the label’s margin, you need to use a more specific selector to override it.

    $(function() {
  $('#lstStates').multiselect({});
});
    body .multiselect-container>li>a>label.checkbox,
body .multiselect-container>li>a>label.radio {
  margin-top: 15px;
  overflow: auto;
}

.multiselect-container label input {
  margin-right: 20px;
}

.multiselect-container>li>a {
  padding: 12px;
}
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

<select size="5" name="lstStates" multiple="multiple" id="lstStates">
  <option value="NJ">New Jersey</option>
  <option value="NY">New York</option>
  <option value="OH">Ohio</option>
  <option value="TX">Texas</option>
  <option value="PA">Pennsylvania</option>
  <option value="GG">asdfa</option>
  <option value="AW">jghjh</option>
  <option value="AE">qwer</option>
</select>
    Login or Signup to reply.
  4. 0

    Instead use margin-top: 15px; only to .multiselect-container label input

    You have to use margin-bottom/top to all row whats mean to li

    $(function() {
  $('#lstStates').multiselect({});
});
    .multiselect-container>li{
margin-top:15px;
}
.multiselect-container label input {
  margin-right: 20px;
}
.multiselect-container>li>a {
  padding: 12px;
}
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

<select size="5" name="lstStates" multiple="multiple" id="lstStates">
  <option value="NJ">New Jersey</option>
  <option value="NY">New York</option>
  <option value="OH">Ohio</option>
  <option value="TX">Texas</option>
  <option value="PA">Pennsylvania</option>
  <option value="GG">asdfa</option>
  <option value="AW">jghjh</option>
  <option value="AE">qwer</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search