1. 程式人生 > >解決layui彈窗下的下拉選擇框被遮擋或顯示不全問題

解決layui彈窗下的下拉選擇框被遮擋或顯示不全問題

問題:在做後臺的時候想要實現這樣一個功能,點選彈出一個視窗,視窗是下拉選擇框,給使用者選擇。用到了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;
}

然後引用即可。