I have a pretty simple example.
Normally, buttons vertically align their texts in the center.
However, given this example
<button style="font-size: 18vh; height: 20vh;">
Click me
</button>
You can clearly see that the top margin is taller than the bottom margin.
According to me, if the button height is 20vh and the font size is 18vh, then the margin above and below the text should be 1vh equally?
Update
It seems like people are suggesting box-sizing: content-box;. However, that does not work for me.
So I am wondering, if there is a way to make this aligned (with additional CSS or HTML) on all systems?
You have the default padding and border applied to button and also box-sizing is set to border-box on button so everything is included in the height you defined which make you calculation wrong.
Use box-sizing:content-box to exclude padding and border:
<button style="font-size: 18vh; height: 20vh;box-sizing:content-box">
Click me
</button>
#Use box-sizing:content-box;
<button style="font-size:18vh;height:20vh;box-sizing:content-box">Click me</button>
#Try To Use line-height:18vh; Property
<button style="font-size:18vh;height:20vh;line-height:18vh">Click me</button>
#Use display:flex; Or display:inline-flex; & align-items:center;
<button style="font-size:18vh;height:20vh;display:flex;align-items:center">Click me</button>
#Try To Use min-height:20vh; Instead Of height:20vh;
<button style="font-size:18vh;min-height:20vh">Click me</button>
#Try To Increase Height Property's Value To height:22vh;
<button style="font-size:18vh;height:22vh">Click me</button>
#Try To Remove Height Property
<button style="font-size:18vh;">Click me</button>
#Try To Decrease Font Size to font-size:16vh;
<button style="font-size:16vh;height:20vh">Click me</button>
#Try To Use font-size:3em; Instead Of font-size:18vh;
<button style="font-size:3em;height:20vh">Click me</button>
#Try To Use height:1.3em; Instead Of height:20vh;
<button style="font-size:18vh;height:1.3em">Click me</button>
Related
I am using VMware clarity for UI and wants to reduce this spacing on left and right side of buttons i.e PDF button, ZIP button. I tried making padding as 0, and even negative padding but its not working.
Below is the code:
<button type="button" class="btn btn-sm" style="margin: 0%; padding: 0%;" (click)="pdf_report(hist)">
<clr-icon class="is-solid" shape="file"></clr-icon>PDF
</button>
Can someone tell me how can I do this.
It seems that your elements are displayed according to flex behavior.
First you should take your dev tool to find where the styles about button.btn.btn-sm element are implemented. If you cannot change that, you can try to override it with important property by adding in the page/element/view your css code like this :
button.btn.btn-sm{
display:inline-block!important;
flex:none!important;// this will break the flex behavior
padding:0!important;
width:auto;
}
<button type="button" class="btn btn-sm" style="margin: 0%; padding: 0%;" (click)="pdf_report(hist)">
<clr-icon class="is-solid" shape="file"></clr-icon>PDF
</button>
I'm trying to make all my form elements the same height. Normally I'd just set a height on each item and job's a good'n! But the dev's I'm working with are adamant I use padding for the buttons incase they need to wrap so the text doesn't get cut off ...by argument would be that's a problem that needs to be solved as well but anyways...
So I have this CodePen showing all my styles. I've included all the CSS just incase anything is being inherited I've missed. I've managed to get most of them the same height by using the same font-size, padding and line-height.
https://codepen.io/moy/pen/pVeOyQ
The problem is one of the buttons doesn't have a border and everything else does, so it's off by a few pixels. I thought border-box would solve this but obviously not!
I could add a border to that button as well and always make sure it's the same colour as the background - but that's a bit of the pain. Is it the only way though?
I know this is a bit of a minor/simple issue but I just want to get some feedback before making a decision.
I've included the CodePen as I couldn't embed all the CSS as it exceeded the limit. Also I couldn't get all the elements horizontally inline on the embed code as there wasn't enough room.
I could add a border to that button as well and always make sure it's the same colour as the background - but that's a bit of the pain. Is it the only way though?
Instead of that, you could add a transparent border, as shown in the snippet below.
input, select, button {
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
padding: 15px;
border: 1px solid #1111;
margin: 0;
}
#transparent-border {
border: 1px solid transparent;
}
#no-border {
border: none;
}
<p>How it looks <i>with</i> the transparent border</p>
<input type="text" name="" placeholder="Input field">
<select class="" name="">
<option value="Select">Select field</option>
</select>
<button type="button" name="button">Button</button>
<button id="transparent-border" type="button" name="button">Button with transparent border</button>
<p>How it looks <i>without</i> the transparent border</p>
<button type="button" name="button">Border</button>
<button type="button" id="no-border" name="button">No border</button>
<p>Comparison</p>
<button type="button" id="no-border" name="button">No border</button>
<button id="transparent-border" type="button" name="button">Button with transparent border</button>
How about setting a min-height for all your elements?
Combined with box-sizing: border-box;
I have a button and some text next to it. I'd like to match the text's vertical alignment with the button's. Here's what I have now:
Basically, I'd like the or Sign Up text to go a bit higher. I'm using MaterializeCSS as well. Here's the code I have for this:
HTML
<div class="center">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
CSS
.alternate-option {
margin-left: 20px;
}
I have tried using padding-bottom as well as margin-bottom.
This is caused by MaterializeCSS's button style :
margin-bottom: 15px;
An alternate solution to Mousa Dirksz's span repositionning would be to
remove the button's default margin :
HTML
<div class="center">
<div class="alternate-option">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span>or Sign Up</span>
</div>
</div>
CSS
.alternate-option button {
margin-bottom: 0px;
}
.alternate-option span {
margin-left: 20px;
}
Try to use:
.alternate-option {
margin-left: 20px;
vertical-align: baseline;
position: relative;
top:-5px;
}
Also look at: http://www.w3schools.com/cssref/pr_class_position.asp
For anyone looking to center a button and a link it's possible to use the following snippet:
<div class="valign-wrapper">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
.alternate-option {
margin-left: 10px;
}
It's important to note that using Materialize valign-wrapper class will vertically align children elements but it will remove the spacing between them that's why we need to add a margin-left on the span children.
Without knowing the full CSS, I suspect that you need to vertically align the button and span..such as:
button, span {
vertical-align: middle;
}
Try this suggestion
Use absolute positioning
CSS:
.alternate-option {
position:absolute;
left:numeric value*(adjust according screen size)*
top:numeric value*(adjust according screen size)*
}
I have five buttons. I want them to take up the available width of their parent div, each being equally sized:
<div style="width: 100%; background-color: red;">
<button type="button" style="width: 20%;">A</button>
<button type="button" style="width: 20%;">B</button>
<button type="button" style="width: 20%;">C</button>
<button type="button" style="width: 20%;">D</button>
<button type="button" style="width: 20%;">E</button>
</div>
Is there a way I can do this without having the manually figure out that they each require 20% width? I want to remove a button at runtime, and that means I have to go and update each remaining button again to width=25%.
I am just checking if there's a more automated way of doing it.
The simplest way, and the most robust way, is to use a table:
<style>
.buttons {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background-color: red;
}
.buttons button {
width: 100%;
}
</style>
<table class=buttons>
<tr>
<td><button type="button">A</button>
<td><button type="button">B</button>
<td><button type="button">C</button>
<td><button type="button">D</button>
<td><button type="button">E</button>
</table>
(This won’t improve your reputation among colleagues these days if they see your code, though it actually solves the problem probably better than any alternative. So you might consider doing the next best thing: use div markup and display: table etc. Fails on old browsers that don’t support such CSS features.)
This is my favorite method (Flexbox)! -
<div style="width: 100%; background-color: red;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
<button type="button">D</button>
<button type="button">E</button>
</div>
div {
display: flex;
justify-content: space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you like */
}
No matter how many buttons you have, it will resize the button width automatically and fill the div.
Working pen: http://codepen.io/anon/pen/YpPdLZ
This is how I'd tackle a situation like this, taking a queue from front-end grid systems. Use classes! When you remove the button, change the class. Here's a fiddle.
Your HTML markup could change to this:
<div>
<button type="button" class="fiveup">A</button>
<button type="button" class="fiveup">B</button>
<button type="button" class="fiveup">C</button>
<button type="button" class="fiveup">D</button>
<button type="button" class="fiveup" id="remove_this">E</button>
</div>
<button id="remove_one">Remove One</button>
CSS like so:
.fiveup {width: 18%;margin:1%;float: left;}
.fourup {width: 23%;margin:1%;float: left;}
and jQuery like so, though you'll probably want to use this script as part of whatever process removes the button:
$('#remove_one').click(function(){
$('#remove_this').remove();
$('button').each(function(){
$(this).removeClass('fiveup').addClass('fourup');
});
});
With bootstrap it is as simple as
<div class="btn-group-vertical">
</div>
If we take that their parents are equally sized, you have two solutions to your problem:
CSS:
button { /* You may want to limit the selector */
width: 100%; /* Or any other percent */
}
JavaScript (jQuery):
$("button").width("100%");
Please note, however, that to be sure you also get the exact value, you may want to stick to pixels. If you are willing to use JavaScript, you can also use computed width.
Edit
If you want to use JavaScript without jQuery, try:
var buttons = document.getElementsByTagName("button"),
i = 0;
for (; i < buttons.length; i++) {
buttons[i].width = "100%"; //Or any other value
}
Note, however, that .getElementsByTagName() will have to be replaced if you want a more complex query.
I think, with jQuery, you could do something more dynamic.
The process for the algorithm would be:
get the width of the div, put into a variable.
divide the width by the number of buttons and put that answer into a variable.
run a function that creates a button at that width by however many times required.
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>