CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
JGV
JGV

Reputation: 5187

bootstrap panel title - align controls on right

I have few controls in bootstrap panel title section and I want them to display on the right side. I used "pull-right" css class to align the controls on right but, the panel title is losing it's height. This behavior is observed in IE8 and above as well as chrome.

Current Status:

enter image description here

Fiddler: https://jsfiddle.net/99x50s2s/156/

Code:

<div id="DataRow" class="col-md-12">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">
                <div class="pull-right">
                    <a class="btn btn-warning btn-xs" data-toggle="collapse" data-parent="#DataRow" href="#CollapseData" aria-expanded="true" aria-controls="CollapseData">
                    <span class="glyphicon glyphicon-collapse-down"></span>
                </a>
                Data               

                <button class="btn btn-danger btn-xs disabled" id="DownloadBtn" type="button" title="Download all data"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbspDownload</button>
                </div>                
            </h3>

        </div>
        <div id="CollapseData" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <div class="form-inline col-sm-12 move-down-sm">
                    Controls will be displayed here
                </div>
                <div class="form-horizontal col-sm-12 move-down-sm">
                    Controls will be displayed here
                </div>
                <div class="form-inline col-sm-12 move-down-sm">
                    Controls will be displayed here
                </div>                    
            </div>
            <div class="panel-footer">
                <button class="btn btn-success btn-xs" id="SaveChangesBtn" type="button" title="Save the changes"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspSave Changes</button>
            </div>
        </div>
    </div>
</div>

Expectation:

enter image description here

Upvotes: 3

Views: 4387

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78520

What you need is to create a new block formatting context around the floated items. This can be done in several ways. I've done so in this fork of your demo using overflow: hidden: https://jsfiddle.net/r30ebnfs/

Another acceptable method is using the following:

.panel-title {
    display:inline-block;
    vertical-align: top;
    width: 100%;
}

https://jsfiddle.net/r30ebnfs/1/

EDIT:

Yet another method is to not float at all and use bootstrap styles (using text-right):

<h3 class="panel-title text-right">
    <div class="">
        <a class="btn btn-warning btn-xs" data-toggle="collapse" data-parent="#DataRow" href="#CollapseData" aria-expanded="true" aria-controls="CollapseData">
            <span class="glyphicon glyphicon-collapse-down"></span>
        </a>
        Data               

        <button class="btn btn-danger btn-xs disabled" id="DownloadBtn" type="button" title="Download all data"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbspDownload</button>
    </div>                
</h3>

https://jsfiddle.net/r30ebnfs/3/

Upvotes: 2

Harry Robbins
Harry Robbins

Reputation: 549

Elements normally get their height based on the content inside them. Floating elements don't normally contribute to that height, so if an element has floating child elements, it's content height will drop to zero if those are the only nested elements.

There are two ways to fix this behavior, both involve clearing the float.

<div id="someContainerWithFloatingChildren">
  <div class="floatingLeft"></div> <!-- or right, or both, doesn't matter-->
  <div class="clear"></div> <!-- empty element that clears the float -->
</div>

.clear {
    clear: both;
}

Or you can use a clearfix, a class that uses pseudo elements to accomplish what this clearing div is doing without polluting your markup with empty elements. I like this way better: https://jsfiddle.net/99x50s2s/157/

More on clearfix: https://css-tricks.com/snippets/css/clear-fix/

Upvotes: 2

Related Questions