width should be left to 100%

[mariusa]

mapbox-gl-js version: v1.11.0

browser: Chrome

Steps to Trigger Behavior

https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-outside-the-map/

Remove the hacks on the page (geocoder class position absolute...) and try to make the text input 100% width. This class prevents it:

@media screen and (min-width: 640px)
.mapboxgl-ctrl-geocoder {
    width: 33.3333%;
    font-size: 15px;
    line-height: 20px;
    max-width: 360px;
}

That page even has a hack to fix this:

.mapboxgl-ctrl-geocoder {
    min-width: 100%;
}

Please remove both width styles from mapboxgl-ctrl-geocoder and let us style it like any html, so it fits it's container size by default.

Expected Behavior

100% width by default on all screen sizes. Developers can add containers as they wish.

Actual Behavior

[karimnaaji]

If I understand this correctly, we would simply remove some of the style css we propose with the library to enable more customization on your use case. Would overriding these properties with https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity possible? We welcome PRs for such small improvements when it facilitates developers customizability!

[andrewharvey]

Is this an issue with mapbox-gl-js or mapbox-gl-geocoder?

@mariusa if you had a PR for the suggested change that would be great. Keeping in mind we also need reasonable defaults so just adding the control without any customisation works.

[mariusa]

Hi,

Is this an issue with mapbox-gl-js or mapbox-gl-geocoder?

The problematic style is in https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css

Would it be possible to please move this issue in https://github.com/mapbox/mapbox-gl-geocoder ?

Keeping in mind we also need reasonable defaults so just adding the control without any customisation works.

Totally agree. That's why I opened an issue instead if fixing it myself with an overwrite. The demo page also fixes this with an overwrite. Let's have better defaults!