Problem:
A button group I've created using bootstrap css appears cut off on the left, as you can see below.
Code:
I have the following HTML logic:
<div class="span5">
<div class="row show-grid">
<div class="btn-group>
<button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
<li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
<li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
</ul>
</div>
<br/>
<div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
</div><!-- end class row show-grid-->
<br/>
</div>
What I've Tried So Far:
I've been using Firefox's Inspect tool to try to find the differences between the top button and the bottom, but I don't know what property I should be looking for. I've tried modifying properties like:
padding-left
padding-right
margin-left
margin-right
I've also tried to reduce the number of classes applied to the button so that I only had:
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
But that didn't resolve the problem. Can someone point me in the right direction? Perhaps by naming the types of properties I should be tracking down? It's probably a CSS specificity problem... because I haven't modified any of the bootstrap stuff.
Thanks
Why are you using a button group for buttons that aren't grouped together? The reason it's "cut off" is because button groups are supposed to be merged together.
Regardless, it's displayed like that because the inner borders of the buttons don't have rounded edges. You can fix it by manually applying the border radius:
border-top-left-radius: 4px; border-bottom-left-radius: 4px
Give this CSS
.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
this is a hack fix but on the containing div that is wrapped around the button - you may simply have
overflow:hidden
Inspect in chrome with firebug and go up and you will most likely see this.. Bootstrap hides data that overflows the columns.
OMG,
the answer is:
to change from:
<div class="btn-group>
to:
<div class="btn-group">
You forgot the "
You can see the live fix here: http://jsfiddle.net/kCsEs/
Following solved my problem
.btn {
width:auto !important;
}
Related
I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/
The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}
I'm trying to create a collapsable div that holds thumbnails for images. So far, everything works except that the div content (the thumbnails) flashes and disappears upon collapse and expand. The content is there, it just doesn't stay. If you're quick enough you can click the thumbnail as it flashes and it takes you to the image path. My div looks like this:
<div class="col-lg-8 col-lg-offset-2">
<div id="images" class="accordion-body collapse">
<a href="../images/1953.01.09.00.jpg" class="thumbnail">
<img src="../images/1953.01.09.00.jpg">
</a>
</div>
</div>
And my button:
<a class="btn accordion-toggle" data-toggle="collapse" href="#images">Images ยป</a>
You can look at my full code here: https://jsfiddle.net/krbylit/jttyq8jv/
Add this to your CSS
.collapse.show {
visibility: visible;
}
For some reason your bootstrap doesn't toggle this property correctly
sometime the case might be some css changes the color of the text inside to white so simply applying the inline css might help :
style="color : black; "
I have this simple user profile -https://jsfiddle.net/mt15199/fgogetrh/
I want to pull the envelope icon on the left, so I put it on span element and added a class pull-left but icons dropped and overlapped the container. Without this span element with pull left class the envelope icon and other icon sitting inside of div.
How can I fix this?
<span class="pull-left">
<a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
</span>
Whenever you are using float don't forget to use clear or else element will overlap.
See demo
Use clearfix class or clear:both; after floated element
use
<div class="clearfix"></div>
or
<div style="clear:both;"></div>
First example is from bootstrap having same style given in second one.
I have a bootstrap drop down on my modal dialog.
After clicking on drop down button drop down menu appears under form.
Is there any way to fix this issue, but without using "position:fixed",because by using fixed attribute I am facing with other issues.
<div id="dialog" title="Basic dialog" ng-show='showDialog'>
<div class="container">
<h2>Dropdown</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>CCCCCC</li>
<li>DDDDDD</li>
<li>EEEEEE</li>
<li>FFFFFF</li>
</ul>
</div>
</div>
</div>
See the dropdwon plnkr
The problem is that the dialog, wich is a div, efectively "contains" the dropdown and all it's contents, so the drowpdown stacking context is surrogated to it.
You can add this css rule to overcome your problem, but take it carefully so it doesn't have any side effects in other dialogs on your app:
<style>
.ui-dialog, #dialog, #container { overflow:visible; }
</style>
You also have a great article here explaining stacking contexts as Z-Index isn't what most people think...
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}