html - opciones - seleccionar lista desplegable php

Establecer el ancho del elemento desplegable en las opciones desplegables de selección de HTML

Question

Estoy trabajando en un sitio web que implica llenar automáticamente un cuadro de selección con un script PHP. Todo funciona bien, excepto que el problema es que lo que estoy usando para llenar el cuadro de texto tienen títulos muy largos (son artículos de revistas y títulos de presentaciones). La caja desplegable se extiende al ancho del elemento más largo, que se extiende fuera del borde de la pantalla, por lo que es imposible alcanzar la barra de desplazamiento. He intentado varios métodos para tratar de configurar manualmente el cuadro desplegable utilizando CSS a un ancho particular, pero hasta ahora no sirvió. Lo mejor que he logrado es establecer el cuadro de selección en un cierto ancho, pero el menú desplegable en sí es mucho, mucho más amplio.

Cualquier consejo sobre esto sería muy apreciado.

EDITAR:

Resulta que la siguiente línea de CSS funciona en todos los navegadores principales, excepto en Google Chrome (que es en lo que estaba probando la página). Si se conoce una solución para Chrome, sería bueno saberlo.

select, option { width: __; }

Answer 1

En el lado del servidor:

1. Definir una longitud máxima de la cadena
2. Clip la cadena
3. (opcional) añadir puntos suspensivos horizontales

Solución alternativa: el elemento de selección está en su caso (solo adivinando) un control de formulario de una opción y en su lugar podría usar un grupo de botones de opción. Estos podrían estilo con un mejor control. Si tiene un [@multiple] seleccionado, podría hacer lo mismo con un grupo de casillas de verificación, ya que ambos pueden verse como un control de formulario de opción múltiple.

Answer 2

Encuentro que la mejor manera de manejar los cuadros desplegables largos es colocarlo dentro de un contenedor divisor de ancho fijo y usar ancho: automático en la etiqueta de selección. La mayoría de los navegadores contendrán el menú desplegable dentro del div, pero cuando haga clic en él, se expandirá para mostrar el valor completo de la opción. No funciona con IE Explorer, pero hay una solución (como siempre se necesita con IE). Tu código se vería algo como esto.

HTML

<div class="dropdown_container">
<select class="my_dropdown" id="my_dropdown">
<option value="1">LONG OPTION</option>
<option value="2">short</option>
</select>
</div>

CSS

div.dropdown_container {
width:10px;
}
select.my_dropdown {
width:auto;
}
/*IE FIX */
select#my_dropdown {
width:100%;
}
select:focus#my_dropdown {
width:auto/9;
}

Answer 3

HTML:

<select class="shortenedSelect">
<option value="0" disabled>Please select an item</option>
<option value="1">Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</option>
</select>

CSS:

.shortenedSelect {
max-width: 350px;
}

Javascript:

// Shorten select option text if it stretches beyond max-width of select element
$.each($(''.shortenedSelect option''), function(key, optionElement) {
var curText = $(optionElement).text();
$(this).attr(''title'', curText);
// Tip: parseInt(''350px'', 10) removes the ''px'' by forcing parseInt to use a base ten numbering system.
var lengthToShortenTo = Math.round(parseInt($(this).parent(''select'').css(''max-width''), 10) / 7.3);
if (curText.length > lengthToShortenTo) {
$(this).text(''... '' + curText.substring((curText.length - lengthToShortenTo), curText.length));
}
});
// Show full name in tooltip after choosing an option
$(''.shortenedSelect'').change(function() {
$(this).attr(''title'', ($(this).find(''option:eq(''+$(this).get(0).selectedIndex +'')'').attr(''title'')));
});

Funciona perfectamente. Yo tuve el mismo problema yo mismo. Echa un vistazo a este JSFiddle http://jsfiddle.net/jNWS6/426/

Answer 4

Pequeño y mejor uno

#test{
width: 202px;
}
<select id="test" size="1" name="mrraja">

Answer 5

Puede diseñar (aunque con algunas restricciones) los elementos reales con el selector de option :

select, option { width: __; }

De esta forma, no solo estás limitando el menú desplegable, sino también todos sus elementos.

Answer 6

Puedes simplemente usar el atributo "ancho" de "estilo" para cambiar la longitud del cuadro desplegable

<select class="my_dropdown" id="my_dropdown" style="width:APPROPRIATE WIDTH IN PIXLES">
<option value="1">LONG OPTION</option>
<option value="2">short</option>
</select>

p.ej

style="width:200px"

Answer 7

Uno pequeño y mejor

var i = 0;
$("#container > option").each(function(){
if($(this).val().length > i) {
i = $(this).val().length;
console.log(i);
console.log($(this).val());
}
});