Mapbox-gl-js: Add a max-width to popup containers

[tristen]

The default style should perform well. Without a max-width it looks like this:

[lyzidiamond]

+1 to this

[jfirebaugh]

What do you propose for a default value? If we can find a value that looks decent for a variety of map/screen/popup sizes, :+1:.

[tristen]

240px _should_ work. I'll test it out on a few devices first.

[jfirebaugh]

It would also be really nice if this was user controllable by specifying an inline style="max-width: x" attribute in the HTML passed to Popup#setHTML, rather than needing to override specific mapbox-js.css CSS in their own CSS. I'm not sure that's possible, which is why I didn't do this before.

[tristen]

@jfirebaugh then this isn't an issue - a user can already inline css a max width to a container div that surrounds what's passed to Popup#setHTML. But it's not exactly nice it has to be done that way and I've never really seen a problem overriding CSS specific to a lib for stuff like this.

[jfirebaugh]

The ideal behavior is to have a default max-width, but be able to override it with inline styling. If that's not possible, then yeah, as CSS override is the next best option. But it means that certain parts of mapbox-gl.css are effectively part of the public API and are change-constrained by semver. So if we do that let's at least add a comment to the CSS saying "this is a public API; don't rename the class or change the specificity".

[tristen]

That's probably a good notice to add to the top of the stylesheet as It's applicable to everything then. I mean, I regularly override all kinds of default styles like here:

Or here

¯\_(CSS)_/¯

[jp4c]

hey @tristen ,
How would the CSS code for these popup?
thanks

[ciukstar]

How should I override max-width of a popup? Thanks.

[ryanhamley]

@ciukstar You can pass in an options object with a maxWidth property when you create Popup. Alternatively, you can call popup.setMaxWidth(). Any valid CSS value will work. See the docs here.