0

I need to change the 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-bar a, a.leaflet-toolbar-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        line-height: 45px !important;
    }
    .leaflet-touch .leaflet-draw-actions a {
        font-size: 20px;
        line-height: 44px;
        height: 44px;
    }
    .leaflet-control-zoom-display {
        width: 45px;
        height: 45px;
        font-size: 18px;
        line-height: 30px;
    }
    .leaflet-touch .leaflet-control-layers-toggle {
        width: 44px;
        height: 44px;
    }
}

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

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

My problem picture

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

Dharman
  • 30,962
  • 25
  • 85
  • 135
Corantin Noll
  • 21
  • 9
  • can't you simply increase glyphicon size and that grey toolbar via css rules? – Kajbo Jun 27 '19 at 13:35
  • Ok i just saw that the reason why of compacted sub-toolbar button is because i target all a tag under leaflet-top. And it's not glyphicon, its a background image in a particlular position given by leaflet-draw pluggin. – Corantin Noll Jun 27 '19 at 13:45
  • yes, you are right about the icon, sorry about that – Kajbo Jun 27 '19 at 13:49
  • But it's steal very painful to change styling because you have to anticipate many component style :p . This is why i also ask for a plugin to do that big styling job. – Corantin Noll Jun 27 '19 at 13:53
  • well, you can edit creation of those icons add custom css properties to them, but I can't seem to find proper object in documentation so I'm starting to fear It's in my memory since I was editing library files – Kajbo Jun 27 '19 at 13:58
  • Alright, thank you very much for trying to help me. I'm going to try something like that, I think I just do not have the choice to override the default style. – Corantin Noll Jun 27 '19 at 14:49

1 Answers1

1

I solved my problem using some css

/*
  ##Devices with touch
*/
.leaflet-touch .leaflet-control-zoom-display {
  width: 48px;
  height: 48px;
  font-size: 18px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a, .leaflet-touch .leaflet-toolbar-0 > li > a {
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 45px;
  background-size: 314px 30px;
}
.leaflet-touch .leaflet-draw-toolbar.leaflet-bar a {
  background-position-y: 6px;
}
.leaflet-touch .leaflet-draw-actions a, .leaflet-touch .leaflet-control-toolbar .leaflet-toolbar-1 > li > .leaflet-toolbar-icon {
  font-size: 20px;
  line-height: 44px;
  height: 44px;
}
.leaflet-touch .leaflet-draw-actions, .leaflet-touch .leaflet-toolbar-1 {
  left: 45px;
}

For the ones using Custom Toolbar plugin : If you set position to right, the sub-toolbar will open at the right (out of the screen) Solved by : 

.leaflet-right .leaflet-toolbar-1 {
  left: auto !important;
  right: 30px;
}
.leaflet-right .leaflet-toolbar-1 li:first-child > .leaflet-toolbar-icon {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.leaflet-right .leaflet-toolbar-1 li:last-child > .leaflet-toolbar-icon {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

(with draw toolbar and custom toolbar position swiped) : Result picture

Corantin Noll
  • 21
  • 9