I would like to have the button positioned on the right. With the code the button is no longer in the fieldset "callout"
< button type="button" class="success button">Save</ button>
< button type="button" class="success button float-right">Save</ button>
You need the class clearfix on a wrapper around the button or on its current parent element.
See https://foundation.zurb.com/sites/docs/float-classes.html
You can see the difference at https://codepen.io/DanielRuf/pen/QzmgJR
Related
I am facing difficulty changing the color of antd Modal buttons
That is the cancel button and ok Button. Can any one tell me how can I do that
<Modal
visible={this.state.visible}
title="Title"
closable={false}
footer={null}>
<div>
Test For No two buttons on the footer.
And No One in header.
</div>
<div>
<Button style={{background:'#000000'}} type="ghost" onClick={this.handleClick}>Login</Button>
</div>
</Modal>
I have made a page with a button in a button like the following :
<button mat-button class="library-tile-button">
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="..."/>
</button>
<img class="library-picture" src="..."></img>
</button>
The buttons use angular material design.
When I click on the parent button I want to navigate to a certain page and when I click on the child button I want to display some additional content. This is working.
When I click on the parent button the default angular material animation for button is triggered. That's fine with me. My problem is that when I click on the child button this is as if the parent button has also been clicked and so the default angular material animation is triggered for both button. I would like to prevent that. What I want is for the animation to be trigerred only for the child button when I click on it.
Any lead how I can acheive that ? Thanks in advance.
As WorksLikeACharm posted, do not nest the buttons. If your problem is just positioning, wrap them into a div and use absolute position on one of them.
Like this:
div {position:relative;}
button {background-color:transparent; border:0;}
.edit-library-button {
position:absolute;
top:40px;
left:40px;
}
.edit-library-button img {width:30px;}
<div>
<button mat-button class="library-tile-button">
<img class="library-picture" src="https://lh3.googleusercontent.com/proxy/7TiJY6Mswv0hNIXdXRS0fgT687TBQ2SaZFd7PNpO8qfknkj4oIjggatPNPhG_6h9DJedmAycJaWe3p2dVHbFhOgyA0P0JbNu_aS1Tynre891APND36cFHll9qyIQWZ2vEk9kmg" />
</button>
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="https://img.icons8.com/material/4ac144/256/facebook.png"/>
</button>
</div>
A possible solution would be to remove the nesting of your buttons, thus seperating the click-events.
<button mat-button class="library-tile-button">
<img class="library-picture" src="..."></img>
</button>
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="..."/>
</button>
I have added two button in modal window in which one button is highlighted but when-ever i am going to click on screen it goes to normal.How can i make it stay highlighted.
I am using following code:
<button type="button" class="btn btn-default">New</button>
<button type="button" class="btn btn-default">Used</button>
<button type="button" class="btn btn-default" autofocus>Any</button>
So you want JSFiddle?
CSS
.active {
color: #F00;
}
JS
$('button').on('click', function() {
$('button').removeClass('active');
$(this).addClass('active');
}
HTML :
<button id="highlight" ..... ></button>
CSS :
#highlight, #highlight:hover, #highlight:active, #highlight:focus {
color://any-color;
// more css
}
NOTE : this is using the pseudo classes hover, focus and active, to keep the same style of the button unchanged when any event on the button occurs.
Try
var yourbuttons = document.getElementsByClassName('highlight-hover');
for (var i = yourbuttons.length - 1; i >= 0; i--) {
var currentbtn;
yourbuttons[i].onclick=function(){
if(currentbtn){
currentbtn.classList.remove("highlight");
}
this.classList.add("highlight");
currentbtn=this;
}
};
There's not really a css only method if you want the button to stay highlighted when you click another part of the screen. :active or :focus remove their styles when the element is not longer active or in focus
Here's a working version of what it seems you want because i'm bored at work https://jsfiddle.net/mksty8eq/
When you click on one button it stays highlighted until another button is clicked
First setting autofocus inside modal will not work always. You should set focus on button via javascript. Refer http://getbootstrap.com/javascript/#modals .
$('#myModal').on('shown.bs.modal', function () {
$('#button3').focus()
})
:focus and :active are pseudo-classes that allows us to define specific CSS rules depending on state of the element. In bootstrap .active and .focus classes has same CSS style as :focus and :active.
So add .active or .focus to the button that you want to highlight always.
<button type="button" class="btn btn-default active">Any</button>
I have 100 buttons inside a div:
<div class="button_group">
<button> ... </button>
<button> ... </button>
<button> ... </button>
...
</div>
I want to style all buttons in the bootstrap style. So, I need to change everywhere < button > to < button class="btn" >. I want to do it without actually adding class="btn" 100 times for each < button > element. So, I need some CSS rule that says that all buttons inside the div are of class "btn". So, I need something like this:
.button_group button {
... add class="btn" to all elements ...
}
Is it possible at all? What is the correct syntax?
Thank you!!
HTML
<div class="button_group">
<button> ... </button>
<button> ... </button>
<button> ... </button>
</div>
CSS
.button_group > button {width: 100px; height: 50px;}
And the fiddle https://jsfiddle.net/049Lj4LL/4/
There is no need to ad class="btn" to every button if they are the same, just add a class to the parent div like you have class="button_group" to be able to identify that specific group of buttons. Like this https://jsfiddle.net/049Lj4LL/6/ and like this https://jsfiddle.net/049Lj4LL/7/
Assuming you have a jquery-like library, you would add a class btn to all the <button> elements like that :
$('div.button_group button').addClass('btn');
Edit: In case you are using the sass or less version of bootstrap, which I encourage you, you can try to extend the btn bootstrap class. Contrary to the javascript solution mentioned above, that won't add the class btn to the elements, but they will inherit the styles of the btn class. Here is the sass solution :
.button_group {
button {
#extend .btn;
}
}
Use javascript.
In JS, you can use the childNodes property of the div element, that you can access using document.getElementByClassName. In the array document.getElementByClassName("button_group").childNodes are initialized all the button tags written in the div. Set the class name with .className. Add the JS code to your HTML with the script tag:
<script>
for(let i=0; i<document.getElementByClassName("button_group").childNodes.length; i++){
document.getElementByClassName("button_group").childNodes[i].className="theClassNameYouDesire";
}
</script>
I’m using button element in a bootstrap template.
I was wondering if it is the normal behavior in bootstrap :
When there is not enough space to show all the buttons on one line, or when the window is resized, some buttons are shown on a 2nd line and it’s ok like that but there is no margin-bottom.
I can add it :
.btn {
margin-bottom: 5px;
}
But i find it strange that it is not handled by bootstrap.
Maybe i’m doing something wrong ?
SOURCE : http://jsfiddle.net/Vinyl/zx9oefya/
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
In Bootstrap's buttons.less and button-groups.less there's nothing about margin-top or margin-bottom. Having a margin by default would likely conflict when combining it with other elements (e.g. a form)
I think the best solution might be adding all buttons inside a btn-toolbar and to style that combination:
.btn-toolbar .btn {
margin-bottom: 5px;
}
Just add the spacing class. m for margin and p for padding.
<button class="btn btn-success mr-2" type="submit">Add</button>
<button class="btn btn-danger mr-2" type="button">Delete</button>
so, here mr is margin-right. similarly, you can add do for other cases.
mb-5 = margin bottom ..just add that :) sorted :)
I think that it's the normal behavior ( not 100% sure ) because it's "cleaner" to add margin ourselves when we want it that having to remove the default margin when we don't want it, from my opinion...
http://getbootstrap.com/components/#btn-groups
There's no margin on bootstrap's buttons examples, only on the parent div class btn-group but it's coming from a different stylesheet ( docs.min.css ). So I think it's that way for devs to add their own custom margins.
See here: