極品滾動條的下拉列表填充伍選項

我有這樣的代碼，其填充下降dopwn菜單：極品滾動條的下拉列表填充伍選項

echo "<div class='form-group'>"; 
echo "<label for='show'>Show:</label>"; 
echo "<select class='form-control' id='filterText' ng-model='filterText' ng-options='show_name for show_name in filterList'>"; // Show Type Dropdown 
echo "</select>"; 
echo "</div>";

我希望能夠只顯示也許8個選項，然後能夠向下滾動查看其餘部分。我如何去做這件事？當我調整高度時，它只是調整實際字段的高度，而不是下拉大小。

這不是我想要的東西：

原來如果列表足夠長的時間，它會自動添加一個滾動條。這不是我最初想要的。如果有8個展示開始，並且能夠通過其他客戶進行滾動，IT會更容易。

來源

2017-05-26 J.Do

您是否嘗試過在選擇的HTML添加屬性'大小= 8'？ – quirimmo

@quirimmo是的，它只是擴大了實際的領域，而不是讓下拉區域成爲一個滾動條。 –

@JDo你是否將它與CSS overflow-y：scroll; – quirimmo

<select onfocus='if(this.options.length > 8){ this.size = 8; }' onblur='this.size=1;' onchange='this.size=1; this.blur();'> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
    <option>7</option> 
 
    <option>8</option> 
 
    <option>9</option> 
 
    <option>10</option> 
 
</select> 
 
<br> 
 
<select onfocus='if(this.options.length > 8){ this.size = 8; }' onblur='this.size=1;' onchange='this.size=1; this.blur();'> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
</select>

來源

2017-05-26 13:33:51 quirimmo

這不是一個巨大的風扇，看起來如何，但我想我會暫時使用它。謝謝。 –

我知道這是一個小的解決方法，但實際上，如果你不想使用CSS，這看起來就像實現你所需要的最簡單的方法。如果這符合你的問題，請投票和接受，以便將來也可以對其他同樣問題的人有用 – quirimmo

select { 
      max-height: 300px; 
      overflow-y: scroll; 
}

這應該爲你做。根據需要調整最大高度。

來源

2017-05-26 11:30:40 JokingBatman

剛試過這個，這調整了實際的領域，它不添加滾動條？ –

HTML：

<div class='form-group'> 
    <label for='show'>Show:</label> 
    <select class='form-control' ng-class="{scrollClass' : show_name.length > 8}" 

    id='filterText' ng-model='filterText' ng-options='show_name for show_name in filterList'></select> 
</div>

納克級= 「{scrollClass'：show_name.length> 8}」

CSS：

.scrollClass{ 
      max-height: 300px; 
      overflow-y: scroll; 
}

來源

2017-05-26 11:35:24 CodeMan

在你的CSS中，你會錯過一個。它應該是.scrollClass – quirimmo

@quirimmo：謝謝更新.. – CodeMan

你的ng級也應該倒置 – quirimmo

也許你可以這樣在Angular中實現HTML/JS/CSS解決方案？

select { 
 
    position:absolute; 
 
}

<div class='form-group'> 
 
    <label for='show'>Show:</label> 
 
    <select size='1' onmousedown='if (this.options.length > 8){this.size = 8}' onchange='this.size = 0' onblur="this.size = 1" class='form-control' id='filterText'> 
 

 
    <option selected>Select</option> 
 
    <option>This is an option</option> 
 
    <option>This is another Option A</option> 
 
    <option>This is another Option 2</option> 
 
    <option>This is another Option 3</option> 
 
    <option>This is another Option</option> 
 
    <option>This is another Option</option> 
 
    <option>This is another Option B</option> 
 
    <option>This is another Option</option> 
 
    <option>This is another Option</option> 
 
    <option>This is another Option</option> 
 

 
    </select> 
 
</div>

來源

2017-05-26 11:58:45

回答

相關問題