CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Mojimi
Mojimi

Reputation: 3161

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

Check this example using Bootstrap 4 and Material icons :

enter image description here

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/

Upvotes: 1

Views: 57

Answers (1)

NoobishPro
NoobishPro

Reputation: 2549

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!

Upvotes: 3

Related Questions