0
1.1K
Vistas¿Cómo establecer la altura máxima del área de selección desplegable?
En la aplicación vuejs2 que tiene una entrada seleccionada con una lista de opciones bastante grande, rompe el diseño de mi página en dispositivos extra pequeños. Buscando en la red encontré la propiedad "tamaño", pero eso no es lo que necesito: quiero tener una selección desplegable, que es la predeterminada. ¿Hay alguna otra decisión, tal vez con CSS para establecer la altura máxima del área de selección desplegable?
PARTE # 1 modificada: Hice una página de demostración de prueba en http://photographers.my-demo-apps.tk/sel_test tiene 2 entradas seleccionadas con diseño personalizado y eventos como en este enlace de ejemplo Cómo establecer la altura para el menú desplegable de Seleccione el cuadro y la siguiente solución en js fiddle :
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>se aplican a la segunda entrada de selección y no se ve/funciona correctamente. Supongo que entra en conflicto de alguna manera con el diseño actual. ¿Se puede arreglar de alguna manera?
como esa es la página vuejs2, sé que hay algunos componentes seleccionados en https://github.com/vuejs/awesome-vue#select y usé algunos de ellos, como vue-select pero necesito mantener un diseño personalizado, así que intento para usar la entrada de selección original...
PARTE modificada # 2: Agregué 2 definiciones de clases:
.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; }También configuro el color de fondo y el borde de estas clases para asegurarme de que estas clases se apliquen y sean importantes para todas las propiedades. Pero no ayudó. ¡Podrías por favor echar un vistazo!
¡Gracias!
4 Respuestas
Responde la pregunta0
Desafortunadamente, no puede cantar la altura de una lista desplegable (mientras usa <select> ). Aquí se confirma.
puede construirlo usted mismo usando div s & v-for (suponiendo que obtenga la lista de un subcontratado) y luego puede diseñarlo como desee.
disculpas por prohibir malas noticias.
0
Especificar height:50px limita la selección a 50 px. Utilice min-height en su lugar. También envuelva el elemento de selección en un div con altura fija para que se superponga al contenido de abajo y no lo empuje hacia abajo.
.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> Solución para la PARTE 2: en .select regla CSS, elimine height:50px de main.css o en frontend.css agregue height: auto !important; .
También olvidaste agregar onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();" a la selección que está resaltando.
Hice los cambios anteriores, localmente, en su página usando Dev Console, y así es como se ve: 
0
TL;RD
No es posible.
Los elementos de entrada y, en particular, las listas desplegables están profundamente anclados al sistema operativo en el que se ejecutan. Esto se puede ver rápidamente si selecciona una lista desplegable en un sistema iPhone o Linux, por ejemplo. Una idea sería construir tu propia lista con JS y CSS. Es posible que ya haya soluciones listas para usar en GitHub y colegas.
0
Desafortunadamente, no puedes hacer eso. La otra forma posible es usar menús desplegables de bootstrap o crear su propio menú desplegable usando divs y configurando onClick en esos.