css - bootstrap panel heading - aligning controls horizontally -


i trying align controls in bootstrap panel-heading , not aligning horizontally. see fiddler: https://jsfiddle.net/99x50s2s/23/

enter image description here

html:

<div id="datarow" class="col-md-12">             <div class="panel panel-info">                 <div class="panel-heading">                     <div class="col-md-2">                             <h3 class="panel-title">                                 <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</h3>                         </div>                          <div class="col-md-10">                             <button class="btn btn-danger btn-xs disabled" id="downloadbtn" type="button" title="download data"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbspdownload</button>                         </div>                                    </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 displayed here                         </div>                         <div class="form-horizontal col-sm-12 move-down-sm">                            controls displayed here                         </div>                         <div class="form-inline col-sm-12 move-down-sm">                             controls displayed here                         </div>                                         </div>                     <div class="panel-footer">                         <button class="btn btn-success btn-xs" id="savechangesbtn" type="button" title="save changes"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspsave changes</button>                     </div>                 </div>             </div>         </div>

what best way align controls horizontally in panel-heading without overwriting bootstrap classes?

expectation:

enter image description here

your markup needs changed bit:

jsfiddle

<div id="datarow" class="col-md-12">     <div class="panel panel-info">         <div class="panel-heading">             <h3 class="panel-title">                 <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 data"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbspdownload</button>             </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 displayed here                 </div>                 <div class="form-horizontal col-sm-12 move-down-sm">                     controls displayed here                 </div>                 <div class="form-inline col-sm-12 move-down-sm">                     controls displayed here                 </div>                                 </div>             <div class="panel-footer">                 <button class="btn btn-success btn-xs" id="savechangesbtn" type="button" title="save changes"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspsave changes</button>             </div>         </div>     </div> </div>

basically, removed col-*-2 , col-*-10 panel-heading, , surrounded <a> , data , <button> in same <h3 class="panel-title"> element. if want button on right hand side, add <span class="pull-right"> around <button class="btn btn-danger" ...> so: 

<span class="pull-right">     <button class="btn btn-danger btn-xs disabled" id="downloadbtn" type="button" title="download data">         <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>         &nbsp;download     </button> </span>

jsfiddle alternative


Comments

Post a Comment

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l...
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more