Is there a bootstrap 3 way to handle small screen sizes for "btn-group"?
Button group is placed in <td> and wrapped in <div class="btn-group">:
Looks okay, until you re-size it to <768px. Then you have:
How to make them persistent? I tried to add class btn-group-justified. But it gives as a result full width buttons and looks even worse on re-size to small screen size.
P.S> I have an idea, how to implement it adding full set of custom classes. My question is about bootstrap3 way. May be I missed something.
You can create two button groups with the same buttons and make one of them btn-group-vertical. Then after applying the hidden-xs and visible-xs to them you can hide and show vertical group on appropriate screen size.
<div class="btn-group hidden-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
<div class="btn-group-vertical visible-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
Unfortunately, this requries repeating the markup of the buttons but it should not be an issue if you use any templating tool (define the markup once and include it twice).
Wide screen:
Narrow screen:
See the JSFiddle.
I want to offer you a version with icons from FontAwesome.
With a minimum screen resolution text hide leaving only icons.
Sorry for my english.
<div class="btn-group">
<button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>
<button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button>
</div>
UPDATE by Vishal Kumar: add GLYPHICONS preview
Check this fiddle: http://jsfiddle.net/Jeen/w33GD/4/
Here's an alternative to #fracz's answer you can try that won't duplicate HTML content. Just copied the css from btn-vertical-group and btn-group and used a media query.
All you have to do is add btn-toolbar-responsive to the toolbar div's classes.
It's in scss for simplicity although you can convert it online easily. Here is the JS Bin:
demo
SCSS:
.btn-toolbar.btn-toolbar-responsive{
text-align: center;
margin: 0;
.btn-group{
float: none;
}
#media (max-width: 767px){
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group{
position: relative;
display: block;
vertical-align: middle;
margin: 0;
.btn {
display: block;
float: none;
max-width: 100%;
}
.btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn:last-child:not(:first-child) {
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
}
.btn-group:not(:first-child):not(:last-child) {
.btn {
border-radius: 0;
}
}
.btn-group:first-child:not(:last-child) {
.btn:last-child, .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
.btn-group:last-child:not(:first-child) {
.btn:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
}
}
Okay, so this worked in a test page I made:
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
Forcing each button to be 50% using col-xs-6 kept it from wrapping in my own test page modeled after your example. However, if you have a wider table than the example and you squish down to 320px, the text will overflow the buttons and it looks even worse than your bad example.
You may already know this and it may not be practical for your situation, so I apologize if I'm just presenting unhelpful examples. However, if your table is much wider than what you posted as an example, I would suggest making your rows using the BS grid instead of a table. What this allows you to do is make a single row become two rows when the page shrinks, e.g.
<div class='row'>
<div class='col-xs-12 col-sm-6'>Some additional details</div>
<div class='col-xs-6 col-sm-3'>Date</div>
<div class='col-xs-6 col-sm-3'>
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
</div>
</div>
then, just find a way to alternate colors, add borders, or whatever you need to show the separation between the multiple row rows.
In the BootPly that I just made, as I said, the buttons start to overlap at very small sizes, but they don't wrap when inside a <td> in my browser tests:
http://www.bootply.com/117330
try to set min-width on <td>
<td style="min-width: 90px">
<div class="btn-group">
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-check"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-question"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-times"></i>
</button>
</div>
</td>
<div id="secondNav" class="btn-group" role="group">
<button class='btn btn-default'>View</button>
<button class='btn btn-default'>Delete</button>
</div>
You can accomplish this with some simple jQuery
<script>
$(window).resize(function() {
justifyBtnGroup('secondNav');
});
function justifyBtnGroup(id) {
var btnGroup = $('#' + id);
if($(window).width() > 768) {
btnGroup.addClass('btn-group').removeClass('btn-group-vertical');
} else {
btnGroup.removeClass('btn-group').addClass('btn-group-vertical');
}
}
justifyBtnGroup('secondNav'); // will run when page loads
</script>
This help for me. It doesn't make the buttons vertical, but it doesn't compress them either
<div class="btn-group flex-wrap" data-toggle="buttons">
No, If you open page in small screen, bootstrap wrap you buttons.
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
you can add the class (btn-group-xs,btn-group-sm) in the media < 720px
hope it will help you ;)
Related
I have a pretty familiar bootstrap modal with the submit button on the left of the close button in the footer. But I am disabling the submit button for a particular invalid form filling, but I am thinking of doing one of a few things - making the button appear enabled so that people can click it and the error will pop-up in a tooltip. Or, I will leave the button with its familiar disabled appearance but if someone clicks it, it will show them the tooltip. Either way I need the div to over the top of the submit button no matter the circumstance:
#clickable {
position: absolute;
width: 55px;
height: 25px;
background-color: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-footer">
<div id="clickable"></div>
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
(I just made it pink so I can see where it is landing). Currently this goes over the close button and not the submit button. Any ideas how to get it to fit snuggly over the submit button?
I'm not sure I got your point. If you just want to hide the button, you can use a pseudo element.
Why not using a pseudo-element?
Basically, you use position: relative inside your button to make it a new space reference. It will be use as a reference for the pseudo-element which is inside, and you strech it with top/bottom/left/right: 0, and that's it.
No need to add some DOM just for styling purpose.
.btn-submit:disabled {
position: relative;
}
.btn-submit:disabled::after {
background-color: pink;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
<div class="modal-footer">
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
If you want it to be the tooltip, you'll have to wrap both the tooltip and the button:
.tooltip-container {
display: inline-block;
position: relative;
}
.tooltip {
background-color: pink;
position: absolute;
left: 0;
top: 0;
width: 55px; //Note that fixing size is probably a bad idea.
height: 25px;
}
<div class="modal-footer">
<div class="tooltip-container">
<div class="tooltip">This is the tooltip.</div>
<button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>✓ Submit</button>
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
I have buttons which follow the following structure:
<button type="button" class="btn btn-dark btn-sm"(click)="doSomething()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
They look like this:
I can change the height and width of the buttons and the inline icons will stay centered:
.btn.btn-dark.btn-sm {
height: 80px;
width: 200px;
}
But then when im making them smaller for mobile, all of the sudden, the inlined icons stop being centered after i fall below a certain width/height:
#media (max-width: 690px){
.btn.btn-dark.btn-sm {
width: 10px;
height: 20px;
}
}
Why do they stop being centered on small width/height? How would i fix it? I tried alligning them to the center etc, but didnt find a working solution yet.
It looks like the button may have some padding that interferes when too small. Try this snippet
.btn.btn-dark.btn-sm {
height: 20px;
width: 20px;
padding: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button type="button" class="btn btn-dark btn-sm" (click)="doSomething()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
I have an input-group as follow:
<div class="input-group" style="width:100%;"> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-primary" onclick="CaptureMapLocation('DependentRelation','0');" role="button"><i class="fa fa-map-marker"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-search"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-remove"></i></a> </div> </div>
I need the last button to have a fixed width, how to do that?
You can achieve this with CSS - the following will target the input group button that is the last child of the input group and apply a width to it.
You should move all your inline styling to a separate (external) CSS sheet which will make the code cleaner and easier to read.
Note the following will apply to all input group buttons in your page so you might want to apply a specific class or id to the parent input group div.
.input-group-btn:last-child {
width: 100px; // or whatever your desired width is
}
You can also do this with flex
.input-group {
display: flex;
}
.input-group-btn {
flex-grow:1;
}
.input-group-btn:last-child {
flex-grow: 0;
flex: shrink:0;
flex-basis: 100px; // or whatever your desired width is
}
If you want to apply the fixed witdh to the second button then it would be
.input-group-btn:nth-child(2){
width: 100px; // or whatever your desired width is
}
Ultimately - if any button could be afffected - you could create a "fixed-width-class" and apply it to the button / s you want affected.
.input-group-btn.fixed-width {
width: 100px; // or whatever your desired width is
}
Im working with a DataTable that has a column containing two Bootstrap-styled buttons. For some reason the button on the right is slightly smaller than the left one.
Image of said problem
Below the code:
<div class="btn-group">
<button type="button" class="btn btn-success btn-block mr-4" style="font-size:20px"> Hoogbouw</button>
<button type="button" class="btn btn-danger btn-block" style="font-size:20px"> Laagbouw</button>
</div>;
Css:
.dataTable tbody tr {
height: 425px;
}
.btn-group{
width: 100%;
height: 100%;
}
h1{
text-align: center;
}
Anything wrong?
Need you to provide additional code, what you have appears fine but what does each individual button look like in terms of formatting? Colours don't default to red and green.
So i had a solution to do something like this:
the problem was that everytime i had a little bigger text my button increased, and it became really ugly since i have a section full of buttons that i want to preserve the same size.
So i think a good option would be to mantain the same size for the buttons? (if there is other option would like to know :)).
So i had this:
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br><span class="fontSize">Image</span>
</button>
</div>
how can i change my solution to have the same effect i want on the button, i mean with the image and text centered related to the image mantaining the size of the button? any help i appreciate :)
Thanks
Are you looking for something like this? (I know, it's ugly)
#test{
min-width: 5px;
max-width: 5px;
}
<button id="test">test</button>
Here you go with a solution https://jsfiddle.net/r3g31e11/1/
.btn {
width: 100px;
height: 30px;
text-overflow: ellipsis;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">
Submit
</button>
<br/>
<br/>
<button class="btn btn-primary">
Testisnottoincreasebuttonwidth
</button>
Truncate the extra character use ellipse. Set height & width of the button.
.test {
width : 80px;
}
.test > span {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:40px;
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small test"><span>Test</span></button>
<button class="btn btn-primary-outline btn-small test"><span>Test with large size</span></button>
</div>