Touch: make the knob align correctly

Make the knob align correctly on touch devices. Please test.
kartena · Oct 31, 2013 · 6a21866 · 6a21866
1 parent 36de01b
commit 6a21866
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/examples/touch.html b/examples/touch.html
@@ -12,7 +12,7 @@
     <![endif]-->
   </head>
   <body>
-    <div id="map"></div>
+    <div id="map" class="leaflet-touch"></div>
     <script src="lib/Leaflet/dist/leaflet-src.js"></script>
     <script src="../src/L.Control.Zoomslider.js" ></script>
     <script src="lib/leaflet-tilejson/src/tilejson.js"></script>

diff --git a/src/L.Control.Zoomslider.css b/src/L.Control.Zoomslider.css
@@ -80,12 +80,16 @@
 	background-position: 10px 0px;
 }
 .leaflet-touch .leaflet-control-zoomslider-knob {
-	width:16px;
-	margin-left: -1px;
+	width: 16px;
+	margin-left: -7px;
 }
 .leaflet-touch .leaflet-control-zoomslider a {
 	width: 30px;
-	height: 30px;
+	line-height: 30px;
+}
+.leaflet-touch .leaflet-control-zoomslider a:hover {
+	width: 30px;
+	line-height: 30px;
 }
 .leaflet-touch .leaflet-control-zoomslider-in {
 	font-size: 24px;
@@ -97,7 +101,5 @@
 }
 .leaflet-touch .leaflet-control-zoomslider {
 	box-shadow: none;
-}
-.leaflet-touch .leaflet-control-zoomslider {
 	border: 4px solid rgba(0,0,0,0.3);
 }