python-visualization / folium

Python Data. Leaflet.js Maps.

Home Page:https://python-visualization.github.io/folium/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TagFilterButton - Dropdown overlaps with Button

Merodas opened this issue · comments

Describe the bug
The Dropdown appearing when using TagFilterButton overlaps with the (then hidden) button itself.
Using multiple Filters becomes challenging, as the text stays hidden behind the other filter buttons.
image

The example page for folium shows this behavior: 
https://python-visualization.github.io/folium/latest/user_guide/plugins/tag_filter_button.html#
The example page for Leaflet does not:
https://maydemirx.github.io/leaflet-tag-filter-button/

Expected behavior
Dropdown should open up next to the button, not overlapping it. By overlapping, using multiple TagFilterButtons is challenging.

Environment (please complete the following information):

  • Browser: Chrome
  • Jupyter Notebook or html files? HTML
  • Python version (sys.version_info(major=3, minor=12, micro=1, releaselevel='final', serial=0))
  • folium version (0.15.1)
  • branca version (0.7.0)

Possible solutions
Solution: Add margin between Button and Dropdown

folium is maintained by volunteers. Can you help making a fix for this issue?
Sadly no, absolute beginner here.

Thanks for the issue report! Seems to be a big indeed, in the example of the Leaflet plugin it does work correctly.

I can’t directly spot what the issue is. I hope it’s something dumb like having the wrong import order for the css files in TagFilterButton: easybuttons should probably be loaded before tagfilterbutton css. But I’m on mobile so can’t check right now.