mapbox-gl-js
mapbox-gl-js copied to clipboard
mapbox
Info button not aligned correctly with box-sizing: border-box
mapbox-gl-js version: latest (v2.1.1?)
browser: Firefox (Windows), Brave (Android), probably all others
I'm using a CSS framework that includes a reset script and sets this CSS style:
*
{
box-sizing: border-box;
}
It's very practical because it simplifies element size handling a lot. Unfortunately, the map script doesn't work properly in such environments. If the map view is smaller (width), the copyright links in the bottom right corner are collapsed to an info button. That button doesn't align properly. It's too far down and jumps up when activated.
Here's the demo code (API key removed, so a live demo probably doesn't work):
<!doctype html>
<html class="center">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Map demo</title>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css">
<style>
*
{
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="map" style="height: 500px;">
</div>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<script>
mapboxgl.accessToken = "**********";
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11"
});
map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>
Workaround:
mapContainer.querySelector("div.mapboxgl-ctrl-attrib.mapboxgl-compact").style.boxSizing = "content-box";
This style might be included in mapbox to fix the issue.
Hi @ygoe, I think you're right that explicitly specifying this in Mapbox CSS would resolve the issue, though I'd want to be certain before going with the suggestion that Mapbox CSS should defend against external wildcard rules. I'm not familiar with how common this rule is these days. Following Paul Irish's article to the updated article, Inheriting box-sizing Probably Slightly Better Best-Practice, an alternate starting point, if possible for you, would be to specify:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
and then avoid this reset for mapbox via:
.mapboxgl-map {
box-sizing: content-box;
}
in particular since the wildcard rule affects all elements within the map's hierarchy, though only some unknown number may be problematic.
See: https://codepen.io/rsreusser/pen/MWJBybQ
While the theory sounds good, and I have accepted the new global style for now (using the inherit rules), it doesn't work for the map. I can set the content-box mode for the map element, but all child elements still have border-box as their computed value. I don't understand why that's the case. And the attribution control is still broken. Only setting the content-box directly on it fixes it.
Also, since all markers are added as a child of the map container, this would again affect all of my custom marker elements which would now live by the map's sizing rules instead of those of the rest of the site.
Any news here? I've upgraded the map from 2.1.1 to 2.9.2, my content-box-inherit style is still in use and has so far worked great everywhere. But I still need my workaround to fix the map display. It's a very simple fix, just add the style I have shown above.