如何设置下拉选择区域的最大高度？

Question

如何设置下拉选择区域的最大高度？

13

在 vuejs2 应用程序中，如果下拉选择框具有相当大的选项列表，则会破坏页面在超小设备上的设计。在网络上搜索后，我找到了“size”属性，但那不是我需要的：我想要默认的下拉选择。是否有其他决策，可能使用 CSS 来设置下拉选择区域的最大高度。

修改部分 #1：我在http://photographers.my-demo-apps.tk/sel_test上制作了测试演示页面，其中有两个带有自定义设计和事件的选择输入，就像这个例子链接中描述的一样：如何为选择框的下拉菜单设置高度，并遵循在JSFiddle中提供的解决方法:

select{
    color: red;
}

<select onfocus='this.size=10;' 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>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
</select>
<div>Popular Tags:</div>

第二个选择输入框应用了样式，但它看起来/工作不正常。我认为它与当前设计有冲突。是否有办法修复它？

由于这是vuejs2页面，我知道有一些选择组件在https://github.com/vuejs/awesome-vue#select，我使用了其中的一些，如vue-select，但我需要保留自定义设计，所以尝试使用原始选择输入框...

修改的第二部分：我添加了两个类定义：

.select-wrapper {
    height: 50px !important;
    overflow-y: visible !important;
    background-color: yellow !important;
}

.select {
    width: 100% !important;
    /* make it min-height*/
    min-height: 50px !important;
    border-radius: 25px !important;
    border-color: #555 !important;
    padding: 10px  !important;
    border:2px dotted red !important;
}

我将这些类别的背景颜色和边框设为 !important，以确保这些属性都被应用。但是没有起作用。您能看一下吗！

谢谢！

- mstdmstd

https://photographers.my-demo-apps.tk/ 不可用。你说的“我想要一个下拉选择，它是默认的”是什么意思？最好附上带说明的截图。 - the Hutt

抱歉，它不在https下，只是开发环境。尝试不使用https运行。 - mstdmstd

4个回答

4

很不幸，当使用<select>时，无法更改下拉列表的高度。

确认在此处。

如果您从外部获取列表，则可以使用div和v-for自行构建它，并按照您的喜好进行样式设置。

为传递坏消息而道歉。

- Guy Nachshon

2

简而言之

无法实现。

输入元素，特别是下拉列表，与执行它们的操作系统紧密相关。例如，在iPhone或Linux系统上选择下拉列表可以很快看到这一点。一个想法是使用JS和CSS构建自己的列表。可能已经有GitHub和同事提供的现成解决方案。

- Maik Lowrey

0

很遗憾，您不能这样做。另一种可能的方法是使用 bootstrap 下拉菜单或者创建自己的下拉菜单，使用 div 元素并在其上设置 onClick 事件。

- Adesh Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- the Hutt · Accepted Answer

指定height:50px会限制选择框的高度为50像素。建议使用min-height代替。同时，将选择框包裹在一个固定高度的div中，这样它就可以重叠在下面的内容上而不会往下推。

.select-wrapper {
  height: 50px;
  overflow-y: visible;
}

.select {
  width: 100%;
  /* make it min-height*/
  min-height: 50px;
  border-radius: 25px;
  border-color: #555;
  padding: 10px;
}

<span>Select height is limited to 8 options.</span>
<div class="select-wrapper form-column form-column-field">
  <select data-no-search="" data-placeholder="Выбрать год" onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();" class="select select-no-search">
    <option disabled="disabled">
      <font style="vertical-align: inherit;">-Select Year</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1922</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1923</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1924</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1925</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1926</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1927</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1928</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1929</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1930</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1931</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1932</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1933</font>
    </option>
  </select>
</div>
<div class="footer__block" style="background-color:wheat;height:200px;border:2px dashed green">
  <h3>Popular tags:</h3>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.
</div>

第二部分修复：在 .select CSS 规则中，要么从 main.css 中删除 height:50px;，要么在 frontend.css 中添加 height: auto !important;。
另外，你忘记给你正在突出显示的选择器添加 onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();"。

我已经在 Dev Console 上本地进行了上述更改，并且这是它的外观：