美文网首页
Select下拉框内容被百度编辑器UEditor挡住的解决办法

Select下拉框内容被百度编辑器UEditor挡住的解决办法

作者: 李北北 | 来源:发表于2017-12-06 09:59 被阅读0次

当下拉框组件太靠近UEditor编辑器组件时候，下拉框会被覆盖掉，如下图：

image.png

解决办法

将下拉框放到一个div中，该div的style属性如下设置，注意z-index的值一定要大于等于10000，不然还是被覆盖，大概UEditor的层级是9999吧；还有一定要先设置position: relative;不然z-index不起作用。

<div class="form-group center-block" style="position: relative;z-index: 10000;">
  <select name="xxx" id="xxx" class="form-control input-sm selectpicker show-tick" data-live-search="true">
    <option value="" selected >请选择项目</option>                   
  </select>
</div>

最后看一下效果

image.png

当然，还有另外一种办法，就是在实例化编辑器时候把编辑器的层级设置低一点，不过要注意不要设置得太低，以免编辑器被其它层覆盖，设置代码如下：

UE.getEditor('editor', {zIndex: 100});

相关文章

  • Select下拉框内容被百度编辑器UEditor挡住的解决办法

    当下拉框组件太靠近UEditor编辑器组件时候，下拉框会被覆盖掉，如下图： 解决办法 将下拉框放到一个div中，该...

  • 解决ueditor挡住select下拉框的问题

    思路：改变z-index来实现

  • 前端 Bug 记录

    Bootstrap Select-Selectpicker 消失 例：Js 动态添加表格内容，下拉框消失 解决办法...

  • angular-ueditor

    angular-ueditor： Ueditor是百度提供的在线编辑器，功能非常丰富，angular-uedito...

  • springboot集成ueditor

    ueditor ueditor是百度开源的富文本编辑器。使用教程可以参考官网。ueditor JPS版下载地址 S...

  • selenium之定位下拉框（Select）

    1. 定位