search

Leaflet / Leaflet.fullscreen

A fullscreen control for Leaflet
http://leaflet.github.io/Leaflet.fullscreen/
ISC License
436 stars 117 forks source link

Centering fullscreen icons in touch environment #44

Closed gwacker closed 8 years ago

gwacker commented 8 years ago

When a touch enabled device is detected, leaflet controls increase slightly in size causing the fullscreen icons to be off center.

I think I have a workable solution by adding the following 2 styles at the end of the style sheet, but it seems like there should maybe be a better one out there.

.leaflet-touch .leaflet-control-fullscreen a { background-position: 2px 2px; }

.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a { background-position: 2px -24px; }

cmulders commented 8 years ago

changing:

.leaflet-control-fullscreen a {
  background:#fff url(fullscreen.png) no-repeat 0 0;
  background-size:26px 52px;
}
.leaflet-fullscreen-on .leaflet-control-fullscreen a {
  background-position:0 -26px;
}

to 

.leaflet-control-fullscreen a {
  background:#fff url(fullscreen.png) no-repeat 0 0;
  background-size:100% 200%;
}
.leaflet-fullscreen-on .leaflet-control-fullscreen a {
  background-position:0 100%;
}

Fixes the problem for me on iOS Safari, just making the size relative instead of static.

cmulders commented 8 years ago

btw: the dist folder of this project is outdated, a touch fix was already merged in #31 and see #18

jfirebaugh commented 8 years ago

Fixed with 26ef3195d955d9c397079eef428115f00b465c90.