多行選擇選項溢出垂直滑塊箭頭

我在我的web應用程序中使用多行選擇元素來顯示選項。一些選項可能足夠長，因此如果它們長於選擇寬度，它們將被隱藏。
問題是有些情況下，其中一個選項足夠長並且隱藏在垂直滑塊箭頭下。在這些情況下，如果您按下箭頭（向下或向上），則不會按下箭頭，但會選擇該選項。
這裏是什麼，我的意思是一個libe例如：https://jsfiddle.net/nitoloz/j29d3emm/1/` （請嘗試使用垂直滑塊箭頭按鈕向下滾動）多行選擇選項溢出垂直滑塊箭頭

我希望這可以固定或者一些CSS技巧（z索引或水木清華類似），但我找不到解決方案

來源

2016-05-10 nitoloz

您必須使用position屬性來修復。 –

我不得不用position財產請檢查下面的代碼

select{ 
     position: relative; 
} 
select option{ 
     position: static; 
}

檢查Updated Fiddle

來源

2016-05-10 12:25:06

這是行之有效的，正是我所需要的！非常感謝:) – nitoloz

您的歡迎:) –

您可以將white-space: normal;設置爲選項元素。這樣，如果選項太長，它會進入另一行，而不是在滾動條下。

更新例如：https://jsfiddle.net/j29d3emm/6/

來源

2016-05-10 12:06:20

謝謝！這似乎是一個不錯的解決方案，但我寧願保持所有選項單線（我有水平滑塊爲此目的）。此外，這種方法可能會增加選擇高度非常明顯 – nitoloz

-1

您只需更換width: 100%到width: auto的類.form-control

DEMO：

https://jsfiddle.net/j29d3emm/2/

來源

2016-05-10 12:06:30 Sylvain

這種方式獲得其父div之外.col-md-3 –

謝謝！不幸的是我有我的選擇在側面板，它不應該溢出父div – nitoloz

是的你是對的，對不起，我沒有注意到它 – Sylvain

多行選擇選項溢出垂直滑塊箭頭

回答

相關問題