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

Question

Estoy trabajando en un sitio web que implica completar 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.

EDIT:

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

select, option { width: __; } 

Answer 1

puede estilo (aunque con algunas limitaciones) los elementos reales mismas, con el option selector:

select, option { width: __; } 

De esta manera no sólo se están limitando el desplegable, sino también todos sus elementos .

Answer 2

En el lado del servidor:

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

solución alternativa: el elemento select está en tu caso (solo adivinando) un control de formulario de una opción y en su lugar podrías usar un grupo de botones de radio. 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 3

Encuentro que la mejor manera de manejar cajas desplegables largas es colocarlas dentro de un contenedor Div de anchura fija y usar width: auto en la etiqueta select. 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 4

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()); 
    } 
}); 

Answer 5

Pequeño Y Mejor Uno

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

Answer 6

u simplemente puede utilizar "anchura" atributo de "estilo" para cambiar la longitud de la caja 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> 

por ejemplo

style="width:200px" 

Answer 7

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. Mira este JSFiddle http://jsfiddle.net/jNWS6/426/