CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
LiranBo
LiranBo

Reputation: 2126

CSS alignment issue with float right

I'm using bootstrap toggle in my project, it works really nice, but when I'm trying to align the toggle div to the right the text (on the left) and div are not aligning anymore.

I was reading about this issue and found that the clearfix class can help here, and it did solve some of the problems, but it's still not looking like it should.

JSFiddle

<ul class="list-group" style="width:200px">
    <li class="list-group-item active">
         <h5 class="list-group-item-heading">
             <i class="fa fa-cogs"></i>
             Settings
         </h5>

    </li>
    <li class="list-group-item">
         <h5 class="list-group-item-text clearfix">
             Data source 
             <div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
                 <input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
                     <div class="toggle-group">
                         <label class="btn btn-primary toggle-on">On</label>
                         <label class="btn btn-default active toggle-off">Off</label>
                         <span class="toggle-handle btn btn-default"></span>
                     </div>
             </div> 
         </h5>
    </li>
</ul>

This is how I wish it will look (never mind the icon please):

enter image description here

Upvotes: 3

Views: 414

Answers (1)

om_jaipur
om_jaipur

Reputation: 2196

You should create an element outside "Data source" and add line-height: 32px; for it :

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" style="width:200px">
    <li class="list-group-item active">
         <h5 class="list-group-item-heading">
             <i class="fa fa-cogs"></i>
             Settings
         </h5>

    </li>
    <li class="list-group-item">
         <h5 class="list-group-item-text clearfix">
             <span style="line-height: 32px;">Data source</span> 
             <div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
                 <input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
                     <div class="toggle-group">
                         <label class="btn btn-primary toggle-on">On</label>
                         <label class="btn btn-default active toggle-off">Off</label>
                         <span class="toggle-handle btn btn-default"></span>
                     </div>
             </div> 
         </h5>
    </li>
</ul>

Upvotes: 1

Related Questions