Button Elements are slipping out (chrome)

Question

Im working on a little project where I want to add a button which opens a menu. The button looks great on Firefox, but when I check on brave or chrome the button elements seem to slip out and I cant pinpoint what it is...

Button on Firefox

Button on Chrome

This is the button with the elemens inside.

<button id="add-menu">
        <img src="plus.png" height="40px" id="plus-minus-icon"><p>Add New Menu</p>
    </button>

This is the CSS code, hope you can help me.

#add-menu {
grid-area: 5 / 1 / 5 / 3;
height: 100%;
width: 80%;
background-color: #333333;
border-radius: 25px;
justify-self: center;
display: flex;
align-items: center;
border: 1px solid black;

z-index: 1;
}
#add-menu img {
margin-left: 5px;
}
#add-menu p {
color: white;
font-size: 24px;
line-height: 50px;
}

it seems okay on my chrome https://codepen.io/sumesh/pen/JjdjQWx — sumeshsn1, Feb 07 '20 at 09:02

score 0 · Answer 1 · answered Feb 07 '20 at 08:26

0

Use -webkit- and -moz- to solve this problem.

Please take a look here: what-are-moz-and-webkit

answered Feb 07 '20 at 08:26

Refat Alsakka

561
2
11

score 0 · Answer 2 · answered Feb 07 '20 at 11:10

Be aware of some known issues with buttons, fieldset and some more when having display flex or grid. You can have a glimpse of this issue here.

Maybe in newer versions of chrome they addressed this issue, this is why it looks fine to @sumeshsn1.

So, in order to solve this issue, wrap the button content on a span element and add the flex properties there:

<button class="button">
  <span class="button__wrapper">
    <img class="button__image" aria-hidden="true" src="https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/7-128.png">
    <span class="button__label">Add New Menu</span>
  </span>
</button>

Some notes:

I remove the id and add classes instead, as this would help you maintaining your code and would enable you to use multiple buttons on your html while being a valid document (you are supposed to have only one id in the document).
As the image purpose is just a visual hint for the button function, lets add an aria-hidden=true attribute to the image element.
Remove inline styles (the height attribute you have on your image tag).

Now, let's review the CSS:

.button {
  height: 100%;
  width: 80%;
  background-color: #333333;
  border-radius: 25px;
  border: 1px solid black;
}

.button__wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.button__image {
  margin-right: 5px;
  height: 40px;
}

.button__label {
  color: white;
  font-size: 24px;
  line-height: 50px;
}

Some notes:

Remove the grid-aria declarations, as this property only makes sense when using a display: grid element, which you don't.
Remove the z-index as well, you need to mess with this property for your issue.

I also wrote this snippet using BEM. You might want to have a look at how this methodology works and how it can help you here.

You can find the updated pen here.

Button Elements are slipping out (chrome)

2 Answers2