Each element in HTML has a default display mode like "block", "inline", etc. For example, the "div" display is "block", and the "span" display is "inline".
I need a display mode like the "button" elements.
It's more like the "inline" because you can put some of them in one line, but unlike the "inline" they can have width property.
OK, enough, let's back to my question.
Which display mode do HTML buttons have?
A button is by default an inline-block, so multiple buttons without a line break or some will be displayed next to each other:
<button>button 1</button>
<button>button 2</button>
If you want them to be under each other, you could display them as block:
button {
display: block;
}
<button>button 1</button>
<button>button 2</button>
And by changing button's display value to block, you could easily center it like so:
(suppose it has a class of btn)
.btn{
display: block;
margin: 2em auto;
}
The default display property of HTML buttons is inline-block.
You can change it using CSS or the style attribute.
Related
I'm trying to create a Navigation field for my website, and I would like my buttons to be underneath each other with a white line in between. I have managed to get this part working by adding two line breaks next to the button, as seen here:
<button id = "next" onclick="next()">
Volgende
</button><br><br>
I'm wondering if it's possible to have them show up like this, but if I hide the button, have the other buttons jump up, so they fill the gap and jump back down when the button becomes visible again.
Thanks in advance!
Don't use line breaks for layout. That's a misuse of their purpose, which is to break text.
Just put your buttons in block-level (or inline-block level) containers, like divs. Obviously you'd hide and show the containers, not the buttons.
.button-container:not(:first-child) {
border-top: 1px solid red;
padding-top: 4px;
margin-top: 4px;
}
<div id="next-btn-container" class="button-container">
<button id="next" onclick="next()">Volgende</button>
</div>
<div id="other-btn-container" class="button-container">
<button id="other" onclick="next()">Volgende</button>
</div>
<div id="another-btn-container" class="button-container">
<button id="another" onclick="next()">Volgende</button>
</div>
<br> is not a good practice for cross-browser perspective, kindly use the standard way by using margin and display:block property of css.
So your html will be like:
<button class="mb-20px d-block" id = "next" onclick="next()">
Volgende
</button>
And add below line in your css
.mb-20px { margin-bottom: 20px; }
.d-block { display: block; }
I have found how to make it work.
Instead of using
document.getElementById("button").style.visibility = 'hidden'
I have now used
document.getElementById("button").style.display = 'none'
This makes the buttons fill the gaps when they're hidden.
Using the antd package (v3) I would like to have a button with a fixed width that wraps around its text and linebreaks when needed so the text fits inside the button and borders appear around the text correctly.
Here is what I have tried at the moment: Codepen. I noted that using whitespace: normal works with but not with antd
const { Button } = antd;
ReactDOM.render(
<>
<div style={{width:"100px"}}>
<Button block type="primary" ghost style={{whiteSpace: "normal"}}>Wrap around text</Button>
</div>
<button style={{width: '100px', whiteSpace: 'normal'}} type='primary'>Wrap around text</button>
</>,
mountNode,
);
The class "ant-btn" has fixed height property, you should need to override it by auto and it works.
<Button block type="primary" ghost style={{whiteSpace: "normal",height:'auto',marginBottom:'10px'}}>Wrap around text</Button>
I have two buttons that I want to align to be in the same line, and for some reason the second one is below the first one...
I thought grouping them in one div will help.
this is my current html, there is probably some difficulty with my attempt to group <md-switch> with <button>.
<div>
<button md-button (click)="publish()" class="md-primary">Update</button>
<md-switch [(checked)]="data.cb1">Sho: {{ data.cb1 }}</md-switch>
</div>
If I am adding a style attribute to it, only the button reacts, so obviously something is going on with the md-switch.
<md-switch> is a directive and no button. So the HTML will be replaced/parsed by angular which (as I think) outputs a block-level element.
Solutions for that would be to use either display: inline-block; or float: left;.
display: inline-block; is easier but will add 1px margin to your elements.
For floats the <button> has to be display: block;, too.
I would like to know how to place 2 buttons horizontally with space between them.
Any simple html and css code snippet someone could share ?
I couldn't find any good example
There are multiple ways, here is a very simple example with floats:
https://jsfiddle.net/dbb8xk38/
<button class="button-1">Example</button>
<button class="button-2">Example 2</button>
button{
float: left;
}
.button-2{
margin-left: 15px;
}
I would strongly encourage you to go w3school CSS tutorial, it will teach you amazing things.
http://www.w3schools.com/css/default.asp
Note: In case with buttons you don't even have to float them, by default they will come next to each other. But with elements such as a div, you would need to float.
Depends on what you're trying to achieve with the rest of the page, in terms of layout and what styles you wish to apply to your other buttons and other HTML controls.
http://www.w3schools.com/css/css_margin.asp
HTML:
<button>Button 1</button>
<button>Button 2</button>
CSS:
button {
margin-left:20px;
}
The HTML/CSS above will place a 20 pixel margin at the left of EVERY button. If you simply need to apply it to one button, then you'll need a separate class or some inline style to do that.
E.g.
CSS:
.buttonSpaced {
margin-left:20px;
}
And then just apply this style to the 2nd button only.
HTML:
<button class="buttonSpaced">Button 2</button>
Or you could just do it inline, if it's not likely to be used again...
<button style="margin-left:20px;">Button 2</button>
Excuse this basic question, but I couldn't find an answer that fit. I have this code in a view:
<div>
<h4> Irrelevant MVC code... </h4>
<button type="button" class="btn btn-success">Accept</button>
<button type="button" class="btn btn-warning">Deny</button>
</div>
I would like the 2 buttons to appear next to the heading, not below. How would I do this please?
Just add css property display: inline-block; to yours elements.
It's a method to display an element as a block while flowing it.
By default, your buttons are already inline, so you just need to display your h4 inline :
h4{
display: inline-block;
}
Try this :-
Because it is a block element, so your buttons come down.
h4{
display:inline-block;
}