possible problem with width/height: 26px definition in .leaflet-bar button:hover style

[hanginwithdaddo]

We've recently noticed that with Internet Explorer 11 button sizes are not always sizing properly to match the icon/glyph placed on the button, while Chrome, Firefox, and Safari render the buttons just fine. After a little trial and error, I seem to have narrowed this down to the the use of an explicit size of 26px in the definition of .leaflet-bar button:hover in easy-button.cs. If I change the width/height from 26px to 100%, the problem goes away and the button sizes render fine.

Old, before local change:
.leaflet-bar button,
.leaflet-bar button:hover {
background-color: #fff;
border: none;
border-bottom: 1px solid #ccc;
width: 26px
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}

After change:
.leaflet-bar button,
.leaflet-bar button:hover {
background-color: #fff;
border: none;
border-bottom: 1px solid #ccc;
width: 100%;
height: 100%;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}

Could someone please review this and see if a change is warranted to easy-button.cs?
Thanks,
Dave

[hanginwithdaddo]

A better solution might be to use:
min-width: 26px
min-height: 26px;

The use of width/height:100%, proposed earlier, may cause other problems.

Note that the issue of buttons not resizing to their content properly may only appear if you use your own styles for the button glyphs which are larger than 26x26 pixels.

[hanginwithdaddo]

For anyone else facing this problem you can use the following as a work-a-round until the plugin source gets fixed.

// The following method corrects a given easy button's size to match its content.
// Easy buttons under IE do not resize properly due to the easy button Leaflet
// plugin using explicit width/height styles of 26px instead of min-width/min-height.
//
// Root of this problem can be found in the easy button plugin's definition of
// .leaflet-bar button:hover in easy-button.cs, which contains the following
// lines:
//
// width: 26px
// height: 26px;
// 
// These lines should use min-width/min-height instead. The reason for these
// lines is to ensure that the buttons rendered by the easy button plugin
// are at least the same size as Leaflet's internal buttons, such as the
// zoom buttons, but causes problems should the glyphs placed on such buttons
// exceed a size of 26x26 pixels, in that under IE the buttons do not
// size properly to accommodate larger glyphs.
//
// @param { L.easyButton } button - The easy button object to modify.
function _fixEasyButtonSize(button) {
    var buttonElement = button.button;
    buttonElement.style.width = "auto";
    buttonElement.style.height = "auto";
    buttonElement.style.minWidth = "26px";
    buttonElement.style.minHeight = "26px";
}

Example:

    button = L.easyButton("someButtonGlyphClassThatIsLargerThan26x26Pixels",  clickListenerFunction, "Description").addTo(map);
    _fixEasyButtonSize(button);

[atstp]

thanks for the extra detail, I'll fix this at the beginning of next week!

[hanginwithdaddo]

Thanks so much!!
Dave

[yangkey87]

hanginwithdaddo, thank you for this function of resolution. It works like a charm!