En este artículo
veremos cómo arreglar un problema de visualización del select cuando a este se
le define un ancho y el contenido de las opciones sobrepasa ese tamaño, para
esto tomaremos como punto de partida el siguiente ejemplo:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
select#selected_name{
width: 300px;
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<select id="selected_name" name="selected_name" size="13">
<option value="1">Alberto Rodriguez Sarmiento [ Adminsitrador, Jefe Proyecto, Arquitecto ]</option>
<option value="2">Rosa Almodovar Zaldivar [ Diseñador, Revisor ]</option>
<option value="3">Rafael Rodriguez [ Encargado de Pruebas, Jefe de Ventas ]</option>
<option value="4">Ana de la Caridad Ramos [ Diseñador, Programador ]</option>
</select>
</body>
</html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
select#selected_name{
width: 300px;
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<select id="selected_name" name="selected_name" size="13">
<option value="1">Alberto Rodriguez Sarmiento [ Adminsitrador, Jefe Proyecto, Arquitecto ]</option>
<option value="2">Rosa Almodovar Zaldivar [ Diseñador, Revisor ]</option>
<option value="3">Rafael Rodriguez [ Encargado de Pruebas, Jefe de Ventas ]</option>
<option value="4">Ana de la Caridad Ramos [ Diseñador, Programador ]</option>
</select>
</body>
</html>
Si copian el
código, lo guardan en un fichero con extensión html y lo abren su forma de
visualizarse cambiara dependiendo del navegador con el que lo hagan, por
ejemplo Internet Explorer 11 y Edge lo mostraría de la siguiente manera:
Estos dos no dan
la posibilidad de ver el contenido que sobrepasa el tamaño del select.
Por otro lado,
estarían Chrome y Opera mostrándolo de la siguiente manera:
Como ven estos
navegadores incluyen el scroll tanto horizontal como vertical aun sin hacer
falta el vertical, en estos todo bien hasta que se trata de ver el contenido
oculto de las opciones con una de ellas seleccionada, se comporta como se muestra
en la imagen:
Como se muestra
en la imagen con la tercera opción seleccionada se le da al scroll horizontal
se obvia el contenido que queda oculto faltando mostrar en el ejemplo las
palabras “de Ventas]”.
Además de los
antes mencionados esta Mozilla Firefox comportándose de otra manera:
En la imagen se
observa el scroll vertical y el contenido que sobrepasa el
tamaño del componente que no es posible visualizarlo.
Todos estos
problemas se resuelven de la siguiente forma:
<!doctype
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.select_container{
width: 300px;
height: 200px;
overflow: scroll;
border: 1px solid #000000;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.select_container{
width: 300px;
height: 200px;
overflow: scroll;
border: 1px solid #000000;
}
.select_container table td{
overflow: hidden;
overflow: hidden;
}
select#selected_name{
width: auto;
height: 200px;
border: none;
outline: none;
margin-right: -20px;
-webkit-margin-end: 0;
margin-bottom: -3px;
padding-right: -20px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="select_container">
<table>
<tbody>
<tr>
<td>
<select id="selected_name" name="selected_name" size="13">
<option value="1">Alberto Rodriguez Sarmiento [ Adminsitrador, Jefe Proyecto, Arquitecto ]</option>
<option value="2">Rosa Almodovar Zaldivar [ Diseñador, Revisor ]</option>
<option value="3">Rafael Rodriguez [ Encargado de Pruebas, Jefe de Ventas ]</option>
<option value="4">Ana de la Caridad Ramos [ Diseñador, Programador ]</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
select#selected_name{
width: auto;
height: 200px;
border: none;
outline: none;
margin-right: -20px;
-webkit-margin-end: 0;
margin-bottom: -3px;
padding-right: -20px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="select_container">
<table>
<tbody>
<tr>
<td>
<select id="selected_name" name="selected_name" size="13">
<option value="1">Alberto Rodriguez Sarmiento [ Adminsitrador, Jefe Proyecto, Arquitecto ]</option>
<option value="2">Rosa Almodovar Zaldivar [ Diseñador, Revisor ]</option>
<option value="3">Rafael Rodriguez [ Encargado de Pruebas, Jefe de Ventas ]</option>
<option value="4">Ana de la Caridad Ramos [ Diseñador, Programador ]</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Si se hace lo mismo que con el código anterior veremos que este se comporta
visualizándose como evidencia la siguiente imagen en todos los navegadores
mencionados:
Y al dar scroll con un elemento seleccionado no se deja de mostrar el
contenido que queda después del tamaño del elemento padre:
Paso a explicar brevemente de qué forma se le dio solución, el elemento
select sigue teniendo el mismo alto pero en el ancho lo ponemos automático para
que los elementos option(sus hijos en el DOM) sean los que definan el tamaño de
este según su contenido, le declaramos un margen negativo a la derecha para
ocultar el scroll vertical que se muestra de manera predeterminada siempre, un
border y outline none para que no se muestren ya que los vamos a definir en
otro elemento, y la clave de todo está en el elemento que contiene al select,
este tiene que ser un td con la estructura de tabla que lleva, es decir tabla > tr > td el tbody puede
obviarse este elemento respetara los márgenes definido en el select y ocupara
20 pixeles más a la derecha del td y para ocultar el contenido restante se declara
un overflow: hidden ha dicho td de esta forma queda oculto el scroll pero con
esto el componente no tiene el ancho que necesitamos que es 300x200 px, para
lograr esto agregamos un div como padre de la tabla en este caso el que tiene
como clase select_container y a este
es al que le definimos mediante css el ancho y alto deseado, un borde para que
este luzca como los propios del compoenente select que ocultamos y la propiedad
overflow para ver el contenido más allá del tamaño sin tener ningún otro
problema de visualización en ninguno de los navegadores antes mencionados.
Espero les
haya servido de ayuda.
The best casino bonuses, promotions & offers 2021 | JtmHub
ResponderEliminar› casino › slots 정읍 출장마사지 › casino › slots The Best Casino Bonuses 오산 출장마사지 & Promotions. JTR Casino provides 강원도 출장마사지 free slot games with a variety of options like 구미 출장마사지 blackjack, roulette, blackjack and 평택 출장안마 more.