Graphic in Button element not centered horizontally

[amardeepmisha]

Hi,

I am using the new Button element in Pro and am not able to get the graphic in the button to align horizontally in the center. It is a bit to the right of center; see image below from Chrome DevTools to see the problem…

[ruenel]

Hello Misha,

Thanks for writing in! Please adjust the width and the maximum width of your button. Make sure that it has the same setting as the exact width of your graphic image. In your screenshot above, you only set 60 pixel while your graphic image is clearly more than that.

Hope this helps.

[amardeepmisha]

Thanks for the reply. I was not very clear in my first message. The whole of the the red rectangle is the button element and the graphic is simply the icon in the button element. So even if I increase the width and height options of the graphic icon, it is still shifted a bit to the right. See the image below.

Here are the settings of the options related to the graphic icon

[christian]

Hey Misha,

It’s because of the icon’s aspect ratio. Please try adding this code in the button’s Element CSS.

$el .x-graphic-icon:before {
    width: 1.3em !important;
    height: 1em !important;
    margin: 0;
    transform: translate(-50%,-50%);
}

Please watch the video in the secure note to see how I came up with that code.

The code below is much simpler and works for any icon aspect ratio but it’s using an experimental display value so please note the browser support at https://caniuse.com/#feat=css-display-contents

$el .x-graphic-icon:before {
  display: contents !important;
}

I’ve added this in our issue tracker so maybe this might get enhanced in the future.

Thanks.

[amardeepmisha]

Thanks @christian_y for such a detailed reply! That worked well for me.

[christian]

You’re welcome, Misha.