I've got a map on GitHub (I have removed everything that isn't needed). The problem is that the geocoding widget doesn't show the search results completely:


I guess this happens due to a custom zoom bar control that includes a Zoom Home function which controls the width to 26px. Removing the.leaflet-bar a part leads to smaller icons but to fully result display.

Does anyone have a hint on how to have big icons and full size result display?


you need to set a style specific to those dropdown elements

.leaflet-control-mapbox-geocoder-results a {width: 100%}
.leaflet-control-mapbox-geocoder-results a:hover {width: 100%;}

you may also want to make the input a bit wider, something like

.leaflet-control-mapbox-geocoder-results {width: 250px;}
.leaflet-control-mapbox-geocoder.active .leaflet-control-mapbox-geocoder-wrap {width: 250px;}

its seems strange that the input does not update with the selected item from the dropdown, but that seems to be how this geocoding control works

| improve this answer | |
  • Adding the first two lines did the job. Could get the second to work due to my limited coding knowledge (if you would like to add as a working example feel free...) Thank you so much. One question: what option would likely be the better choice to adapt mobile devices? and a second: is it possible to change font size? seems quite big for now. thanks – hoge6b01 Mar 14 '15 at 20:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.