jeudi 27 juin 2019

Which Leaflet library or workaround to control toolbar size

I need to change styling of the toolbar like the size of the button to have a bigger touch area for mobile (draw toolbar and other controls).

I already tried to change the size to 48px for width and height of toolbar button using css.

Current css :

/*
  ##Device = Mobile, Tablet
*/
@media (max-width: 1024px) {
    .leaflet-top a, .leaflet-bottom a, .leaflet-left a, .leaflet-right a {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        line-height: 45px !important;
    }
}

When i change the size in the css way, the toolbar is not responsive anymore (leaflet-draw toolbar background should fit size)

It also glitch when you click on a toolbar button and it show the horizontal sub-toolbar (text is overlapping).

Is anyone know a plugin or a way to have a bigger touch area for mobile?




Aucun commentaire:

Enregistrer un commentaire