解決layui彈窗下的下拉選擇框被遮擋或顯示不全問題
阿新 • • 發佈:2019-02-08
問題:在做後臺的時候想要實現這樣一個功能,點選彈出一個視窗,視窗是下拉選擇框,給使用者選擇。用到了layui,但是卻發現,彈窗雖然固定了高寬,但是裡面的下拉框,在顯示的時候卻被彈窗擋住了,導致滾動條出現。
如下圖:
後來發現只要是不用layui提供的下拉選擇框,是不會出現被遮擋的問題的。
但是我還就非要用了,怎麼滴了吧...
研究很久,怎麼解決呢?
方法如下:
首先看看問題出現在哪裡?
其實是layui樣式設定的問題。
可以看到在layui內部樣式中,對.layui-layer-content定義了overflow屬性且為auto,只要取消這個屬性,就不存在遮擋問題。
關於overflow:
解決辦法:
如果你想在自己的css檔案重新定義.layui-layer-content的樣式發現是不起作用的,怎麼改呢?
檢視官方文件:
官方連結:http://www.layui.com/doc/modules/layer.html#skin
自己定義彈窗樣式如下:
body .layer-ext-myskin .layui-layer-content {
overflow: visible;
}
然後引用即可。