Horizontal toolbars?

[sgofferj]

Maybe I have missed something but is it possible to easily make horizontal toolbars with this plugin? If not yet, I would like to suggest it as a feature request.

[justinmanley]

yes! it's definitely possible. I'm assuming by "horizontal toolbar" you mean a horizontal control-style toolbar (popup toolbars are horizontal by default). Like this? [image: Screen Shot 2019-06-24 at 6.46.10 PM.png] You can achieve that by setting adding some CSS to change <li> tags from display: list-item to display: inline-block (list-item cascades down by default, whereas inline-block flows from left to right). I recommend that you create a new class (say, L.Toolbar.Control.Horizontal, or something similar) and set a new CSS base class (e.g. .leaflet-toolbar-control-horizontal). You'll want to inherit all the styles from .leaflet-toolbar-control, and also make the CSS change I described above (see Toolbar.less <https://github.com/Leaflet/Leaflet.toolbar/blob/master/src/Toolbar.less#L83>). You'll also need to tweak a height attribute somewhere (not quite sure where) to get the bottom border to look right on the horizontal toolbar. If you want to submit this back upstream, I'd be happy to review a PR :).

…

[sgofferj]

The image doesn't show but basically, I want to create a toolbar for animation control and that is a bit awkward vertically. I'll try to make it work with your hints - thank you for those! - though I'm more or less a JS newbie. Modernizing my weather website saakeskus.fi is kinda also a huge JS learning project for me :D.

[justinmanley]

sorry about that! Here's the picture I tried to send before:

The approach I described above should allow you to create a horizontal toolbar by extending the Leaflet.toolbar library -- you shouldn't need to modify the library code at all. If you decide to submit a PR upstream (modifying the library to provide this new functionality), we would handle it a bit different -- probably creating an option on the Leaflet.Toolbar.Control class, rather than creating a new Leaflet.Toolbar.Control.Horizontal class.

[sgofferj]

Jup, that's what I meant. Thank you!

[pispidikisj]

add the following css:

.leaflet-draw a {
float: left;
}