文章/答案/技术大牛

发布

社区首页 >问答首页 >控制工具栏大小的叶片库或解决方法

问控制工具栏大小的叶片库或解决方法
EN

Stack Overflow用户

提问于 2019-06-27 21:24:10

回答 1查看 820关注 0票数 0

我需要更改工具栏的样式，如按钮的大小，以便有一个更大的移动触摸区域(绘制工具栏和其他控件)。

我已经尝试改变大小为48px的宽度和高度的工具栏按钮使用css。

当前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;
    }
}

当我以css方式更改大小时，工具栏不再响应(leaflet-draw工具栏背景应适合大小)

当你点击工具栏按钮并显示水平子工具栏(文本是重叠的)时，它也会出现故障。

有没有人知道一个插件，或者有什么方法可以让移动设备有更大的触摸区？

javascript

leaflet

leaflet-draw

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-28 03:52:38

我用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;
}

对于使用自定义工具栏插件的用户:如果将位置设置为右侧，子工具栏将在右侧(屏幕外)打开，解决方法为：

.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;
}

(滑动绘图工具栏和自定义工具栏的位置)：

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56792059

复制

相似问题

问控制工具栏大小的叶片库或解决方法
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问控制工具栏大小的叶片库或解决方法EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问控制工具栏大小的叶片库或解决方法
EN