美文网首页
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挡住的解决办法

          本文链接:https://www.haomeiwen.com/subject/oahkixtx.html