https://coreui.io/demo/React_Demo/#/buttons/buttons
Why do the buttons in the 'Options' card have space between them and the rest of the cards do not?
The CSS is identical of the button's, and the container card
No-one in my office can find the cause.
I have moved the Options card to a different location in the DOM and that makes no difference.
The difference is in the HTML, not the CSS
The first 'Options' card has whitespace between the buttons and the rest do not.
<div class="card-body"><button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-link">Link</button> </div>
Related
This question already has answers here:
Two inline-block elements, each 50% wide, do not fit side by side in a single row
(9 answers)
Closed 5 years ago.
I have tried to inspect a "Buttons" example from Bootstrap 4. They have a nice-looking row of buttons, like this:
http://getbootstrap.com/docs/4.0/components/buttons/
But I don't understand, where does the space between buttons is coming from.
This is not margin, not flex-box aligning, not a transparent border.
So, how it works? Actually, I disabled all the styles in dev-tools, but that space did not disappear.
The space is there because there's whitespace between the HTML elements. If you remove the whitespace, the buttons will be positioned next to each other.
Note that whitespace (newline) between the elements is condensed to a single space by the browser.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
Now if we remove the whitespace:
<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>
If you check with firefox the space coming from here please check screenshot:
You can remove the space by adding your own css rule like merging or padding.
Thanks
The space is coming because buttons are inline elements by default...it is not a bug..its just the way inline elements align in browsers...
So remove all the space from your coding is a solution, which I don't think I will do, because if you are coding your code should look good...right..
As you are using bootstrap4 you can use bootstrap d-flex class
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent d-flex">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
Another solution is you can set the font-size of the parent of buttons to 0 and then set the font-size of buttons to the default one
Stack Snippet
.parent {
font-size: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
You can solve it using simple parent element to flex
<div class="button">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
</div>
<style>
.button{
display: flex;
}
.button > button{
display: inline-block;
}
</style>
I assumed there is no difference until I spent hours trying to figure out why my buttons do not align properly.
Originally, I had the following code:
<div class="col-sm">
<button id="btnRegisterX" type="button" class="btn btn-Orange" data-toggle="modal" data-target="#mdlRegisterX">X</button>
</div>
<div class="col-sm">
<button id="btnRegisterY" type="button" class="btn btn-Orange " data-toggle="modal" data-target="#mdlRegisterY">Y</button>
</div>
<div class="col-sm">
<button id="btnRegisterZ" type="button" class="btn btn-Orange" data-toggle="modal" data-target="#mdlRegisterZ">Z</button>
</div>
The purpose was to have the buttons lined up in one column. That was not the case. They were in separate rows, but no matter how much I tried, the buttons did not line up. However, when I tried the <asp:Button.../> alternative (the exact same attributes in each button, just in that format), everything worked as intended. There was also nothing in the CSS file that contained any alignment attributes for those particular classes.
Any thoughts as to why?
If I put several Bootstrap 3 buttons in a row:
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
there is a small space between them. Where does it come from and how to remove it without using float? According to the Firebug and Chrome Inspector the buttons haven't any margin applied to them.
The newline between the buttons actually causes the space. Observe:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
There is a button-group rule you can use if you want the buttons visually grouped: http://getbootstrap.com/components/#btn-groups
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
I believe you style your buttons display:inline-block; or inline. By default they create spaces if you have newline character.
So to remove it, put those markups next to each other without newline char.
It would get messy, but will get what you want without having a style float
So do it like this :
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
I have a button group containing 10 buttons. Under certain screen widths (responsive) I hide some of these buttons with media queries.
The problem is that if I hide the last button the new last button's edges do not become rounded.
It's a difficult problem to describe, but very easy to show in a Fiddle.
My question: how can I add the rounded corners to the last visible button in the button group, rather than simply the last button, as it currently is.
Code from Fiddle below, as per SO's rules:
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default" style="display:none;">Sixth</button>
</div>
Note the lack of rounded corners on 'fifth' in the second button group.
I can do this using JavaScript by adding a new class to the last visible element, but I'd rather not. Is there a cleaner CSS-only solution?
If you don't mind adding a dependency, I recommend AngularJS' ng-if. It comes in handy when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes. It will remove the element from the DOM and allow you to achieve your goal.
Here's a solution using jQuery:
$('.btn-group').has('.btn:hidden').find('.btn').css('border-radius', 0);
$('.btn-group').has('.btn:hidden').find('.btn:visible:first').css({
'border-top-left-radius': '3px',
'border-bottom-left-radius': '3px',
});
$('.btn-group').has('.btn:hidden').find('.btn:visible:last').css({
'border-top-right-radius': '3px',
'border-bottom-right-radius': '3px',
});
For each button group with hidden buttons, this will remove the border radii for all buttons within, and then add back border radii for the first and last visible buttons.
OP's Fiddle with solution
One option is to simply duplicate the code and add an hidden-xs class the first code block and visible-xs to the other code block.
Like this:
<div class="btn-group hidden-xs" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group visible-xs" id="sortBtns2" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
Another option is to apply the css rule to the edgy element:
.edgy-right-element {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
I'm trying to have two different elements, one that would be shown on phones + tablets, and one that would be shown on desktops/etc. These two different items also have tooltips, that I want to always be shown (so not using the hover)
The issue I'm running into, is both tooltips are always displayed, even if the responsive element (div, or a button in this case) are hidden.
HTML:
<div class="container">
<div class="row col-md-12">
<button type="button" class="btn btn-default tooltip-btn visible-xs visible-sm" data-toggle="tooltip" data-placement="bottom" title="Small Screen Tooltip">visible-xs, visible-sm</button>
<button type="button" class="btn btn-default tooltip-btn visible-md visible-lg" data-toggle="tooltip" data-placement="bottom" title="Large Screen Tooltip">visible-md, visible-lg</button>
</div>
</div>
JS:
var opts = {"container": "body", "trigger": "manual", "html": true};
$('.tooltip-btn').tooltip(opts).tooltip("show");
I have an example JSBin: http://jsbin.com/UFoRIYex/508/edit
Possible to do?
The issue is caused by the fact that you are applying the tooltip either way, irrespective of if the button is visible at all. To go around that, you'll have to first give an id to your buttons...
<button id="small" type="button" class="btn btn-default tooltip-btn visible-xs visible-sm" data-toggle="tooltip" data-placement="bottom" title="Small Screen Tooltip">visible-xs, visible-sm</button>
<button id="medium" type="button" class="btn btn-default tooltip-btn visible-md visible-lg" data-toggle="tooltip" data-placement="bottom" title="Large Screen Tooltip">visible-md, visible-lg</button>
... then check for their visibility in js as follows:
if ($('#small').is(':visible'))
$('#small').tooltip(opts).tooltip("show");
if ($('#medium').is(':visible'))
$('#medium').tooltip(opts).tooltip("show");
I updated your PasteBin here: http://jsbin.com/UFoRIYex/509/edit