Reduce spacing around buttons in UI - html

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>

Related

How to vertically align a button text that uses the "vh" units?

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>

How to add spacing between bootstrap buttons like in example?

There is a comprehensive example of bootstrap button on the official website, but I can't figure out why there is a spacing between the buttons and how to do the same?
Any browser debug tool does not show anything: there are some top and bottom margins but nothing about horizontal spacing! Can anyone explain?
https://getbootstrap.com/docs/4.3/components/buttons/
Just add in your styles something like :
button.btn {
margin: 0 1px;
}
But be sure that it doesn't impact other styles that you wrote before
Since you are using bootstrap 4, you could also add the class "mr-1" to your buttons; that way you don't have to change the css (unless you want to :) ).
This is due to their reboot stylesheet which styles the documentation you are looking at.
If you pull up a google element inspector their is actually a total of 2 maring and 6px padding on the left and right side of the buttons. This will not apply to the buttons that you use in your templates.
The spacing you are describing is what happens when you have multiple display:inline-block elements with the code that creates them each on their own line.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<p>These buttons will appear with spacing between them.</p>
<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>
<hr />
<p>These buttons will not.</p>
<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>
There are any number of ways to add the spacing manually using the .m-*-* utility class or other custom CSS. Or you can simply output your HTML with each button on a new line.

Why is inline styling OK with bootstrap?

I am doing an online course on frontend, I have just started getting to know bootstrap 4 and flexbox. As far as I understand, to do inline styling is something that is considered bad practice. What I mean is this:
<button style="color: white; border: 5px solid red;"> Press me! </button>
And I like that the good practice is to not do this, mainly because of readability. What I don't understand is why the button above is not a good practice but the code here is considered good practice
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
Just to clarify I do understand that the style that I used in the example doesn't do the same thing as the one using bootstrap. I am just interested in why one is OK and the other one is not.
The only thing that I have come up with is that since bootstrap is using class="" it's probably not inline styling.
The first instance is inline styling:
<button style="color: white; border: 5px solid red;"> Press me! </button>
and the second has several classes that are styled in a separate css file:
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.
For example (bad practice):
HTML
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
vs (good practice):
HTML
<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>
CSS
.button {
background-color: dodgerblue;
}
You can read more about CSS styling here.

Why are my buttons differently sized and their contents differently aligned?

Check this example using Bootstrap 4 and Material icons :
It seems that only the first button is correctly sized and its icon correctly aligned, plus the icons are all the same size.
I noticed that removing the following css code fixes it :
.btn-icon::after{
content: " " attr(title);
letter-spacing: -1rem;
opacity: 0;
transition: letter-spacing 0.3s ease-out, opacity 0.3s ease-out;
}
.btn-icon:hover::after{
letter-spacing: normal;
opacity: 1;
}
But I need that effect. Why is this extra "ghost padding" being added on the right of the non-first buttons? And how can I fix this?
JsFiddle : https://jsfiddle.net/xpvt214o/136541/
Ok, so my previous answer had some strong points, but it wasn't correct.
I now have the correct answer for you. It's in the differences;
Your original jsFiddle;
<button title="Button1" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">file_download</i></button> <!-- note the 0 space between button and i elements -->
<button title="Button2" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">search</i><!-- What's this? -->
</button>
<button title="Button3" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">filter_list</i><!-- what's this? -->
</button>
This is because we are working with inline elements here. We are nesting something within the button elemenent, which means it behaves differently. In fact, it behaves differently in the sense that (and browsers don't all treat this the same, ie; Firefox creates spaces and Chrome does not) when you leave empty space within said elements. Usually you wouldn't notice, but because the :after creates content behind it, the whitespace is ineed rendered as whitespace (in firefox)
So, there are 2 ways to fix this issue;
The simple way; remove the whitespace from your code
<button title="Button1" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">file_download</i></button>
Or the code-technically messy way but won't break if someone reformats your code so it's more stable and trustworthy way;
<button title="Button1" class="btn btn-outline-secondary btn-icon"><i class="material-icons">
file_download
</i><!-- These comments remove the effective html whitespace!!
--></button>
<button title="Button2" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">search</i><!-- Because you are commenting them out!
--></button>
<button title="Button3" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">filter_list</i><!-- Amazing, isn't it?!
--></button>
This is why I prefer to use div elements and just style them as buttons, but that faces different issues. I just avoid these inline elements mostly because they get treated differently cross-browser a lot.
-- oh, and the JSFIDDLE of course!
Here is some more info on dealing with inline-block elements and their whitespaces!

Make buttons the same width without specifying the exact 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.