Icon not centered on mobile

[delimmy]

Icon looks centered on desktop but is pushed to the right on mobile (iPhone X)

const ezButton = L.easyButton('<span style="font-size:2em; line-height:26px; color:#FF3D2D;">&hearts;</span>', function (btn, map) {
})

Any ideas how to fix?

[atstp]

My hunch is that this is more of general styling issue than an EasyButton issue. I'm happy to help with what I can though.

I'd guess that this stems from putting a large/wide character into a smaller, square box.

If you set font-size:26px (to match your line-height), how is centering affected?

[kitchensjn]

I'm probably late to this thread but just had to work through this myself:

const ezButton = L.easyButton(
    '<span style="font-size:2em; line-height:26px; color:#FF3D2D;">&hearts;</span>', 
    function (btn, map) {}
)
ezButton.button.style.padding = '0px';

This will remove the padding and allow your icon to be centered within the button. There may be a more elegant way of changing the button style when you initially create it. Hope this helps get you on the right track!

[sonfire186]

I found the same problem on desktop computers

[sonfire186]

#48

function _fixEasyButtonSize(button) {
    var buttonElement = button.button;
    buttonElement.style.padding = '0px';
    buttonElement.style.width = "26px";
    buttonElement.style.height = "26px";
    buttonElement.style.minWidth = "26px";
    buttonElement.style.minHeight = "26px";
}
_fixEasyButtonSize(button);

[dgva]

For me, adding padding: 0; directly to the CSS file, in the initial property, solves the issue:

.leaflet-bar button,
.leaflet-bar button:hover {
...
padding: 0;
}

In my case, i use a trick to place icons everywhere, using an extra CSS file and a function. But in the end, it results in the same problem as posted here, so even though they are slightly different situations, this solution should work for both.

[F4FXL]

I am using leaflet embeded into a Wordpress site. Had a similar issue.
It turned out to be the Wordpress CSS setting some styles to the button.
Adding this as an inline css solved the issue for me.

button.easy-button-button	{
	padding: unset !important;
	font-size: unset !important;
	font-weight: unset !important;
	text-transform: unset !important;
	-webkit-transition: unset !important;;
	transition: unset !important;
}

[jaffadog]

Old issue, but contributing my findings. I had a similar issue where I was using an svg on the button and it would render just fine (centered) in chrome and safari (on macos), but shifted to the right in safari in iOS - as shown in the OP screenshot. Using "web inspector" to see what was going on with safari on ios, I found that defaults for padding-inline-start and padding-inline-end were not being overridden. looks like mobile safari has some big defaults (16px?).

added this to my css and the svg icon centered up just fine:

        button.easy-button-button {
            padding-inline: 0;
            padding-block: 0;
        }