css - español - personalizar contact form 7 plugin
Cómo ampliar el ancho de la opción ''seleccionar'' después de que el usuario quiera seleccionar una opción (10)
De acuerdo, esta opción es bastante hackish pero debería funcionar.
$(document).ready( function() {
$(''#select'').change( function() {
$(''#hiddenDiv'').html( $(''#select'').val() );
$(''#select'').width( $(''#hiddenDiv'').width() );
}
}
Lo cual implicaría un div oculto.
<div id="hiddenDiv" style="visibility:hidden"></div>
ohh, y necesitarás jQuery
Tal vez esta es una pregunta fácil, tal vez no. Tengo un cuadro de selección donde código fijo con ancho. Digamos 120px.
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>
Quiero poder mostrar la segunda opción para que el usuario pueda ver la longitud completa del texto.
Como todo lo demás. Esto funciona bien en Firefox, pero no funciona con Internet Explorer6.
Solucioné mi problema con el siguiente código:
<div style="width: 180px; overflow: hidden;">
<select style="width: auto;" name="abc" id="10">
<option value="-1">Any</option>
<option value="123">123</option>
</select>
</div>
¡Espero eso ayude!
Saludos, Cychan
Mejoré la solución de cychan, para ser así:
<html>
<head>
<style>
.wrapper{
display: inline;
float: left;
width: 180px;
overflow: hidden;
}
.selectArrow{
display: inline;
float: left;
width: 17px;
height: 20px;
border:1px solid #7f9db9;
border-left: none;
background: url(''selectArrow.png'') no-repeat 1px 1px;
}
.selectArrow-mousedown{background: url(''selectArrow-mousedown.png'') no-repeat 1px 1px;}
.selectArrow-mouseover{background: url(''selectArrow-mouseover.png'') no-repeat 1px 1px;}
</style>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$(''#w1'').wrap("<div class=''wrapper''></div>");
$(''.wrapper'').after("<div class=''selectArrow''/>");
$(''.wrapper'').find(''select'').mousedown(function(){
$(this).parent().next().addClass(''selectArrow-mousedown'').removeClass(''selectArrow-mouseover'');
}).
mouseup(function(){
$(this).parent().next().removeClass(''selectArrow-mousedown'').addClass(''selectArrow-mouseover'');
}).
hover(function(){
$(this).parent().next().addClass(''selectArrow-mouseover'');
}, function(){
$(this).parent().next().removeClass(''selectArrow-mouseover'');
});
$(''.selectArrow'').click(function(){
$(this).prev().find(''select'').focus();
});
$(''.selectArrow'').mousedown(function(){
$(this).addClass(''selectArrow-mousedown'').removeClass(''selectArrow-mouseover'');
}).
mouseup(function(){
$(this).removeClass(''selectArrow-mousedown'').addClass(''selectArrow-mouseover'');
}).
hover(function(){
$(this).addClass(''selectArrow-mouseover'');
}, function(){
$(this).removeClass(''selectArrow-mouseover'');
});
});
</script>
</head>
<body>
<select id="w1">
<option value="0">AnyAnyAnyAnyAnyAnyAny</option>
<option value="1">AnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAny</option>
</select>
</body>
</html>
Los PNG utilizados en las clases de CSS se cargan aquí ...
Y todavía necesitas JQuery .....
Una solución simple que utilicé para un sitio existente en IE (usando jQuery, pero puedo publicar de nuevo con eventListener si realmente no conoces a JS) es la siguiente:
if (jQuery.browser.msie) {
jQuery(''#mySelect'').focus(function() {
jQuery(this).width(''auto'');
}).bind(''blur change'', function() {
jQuery(this).width(''100%'');
});
};
Por supuesto, use una variable ( var cWidth = jQuery(''#mySelect'').width(); ) para almacenar el ancho anterior, pero esto es todo lo que se requiere para que el nuestro funcione como usted espera.
Esto imita la mayor parte del comportamiento que buscas:
<!--
I found this works fairly well.
-->
<!-- On page load, be sure that something else has focus. -->
<body onload="document.getElementById(''name'').focus();">
<input id=name type=text>
<!-- This div is for demonstration only. The parent container may be anything -->
<div style="height:50; width:100px; border:1px solid red;">
<!-- Note: static width, absolute position but no top or left specified, Z-Index +1 -->
<select
style="width:96px; position:absolute; z-index:+1;"
onactivate="this.style.width=''auto'';"
onchange="this.blur();"
onblur="this.style.width=''96px'';">
<!-- "activate" happens before all else and "width=''auto''" expands per content -->
<!-- Both making a selection and moving to another control should return static width -->
<option>abc</option>
<option>abcdefghij</option>
<option>abcdefghijklmnop</option>
<option>abcdefghijklmnopqrstuvwxyz</option>
</select>
</div>
</body>
</html>
Esto anulará parte del comportamiento de pulsación de tecla.
Colócalo en un div y dale una identificación
<div id=myForm>
luego crea un CSS realmente simple para acompañarlo.
#myForm select {
width:200px; }
#myForm select:focus {
width:auto; }
Eso es todo lo que necesitas.
Muestra
function PopulateDropdown() {
$.ajax({
type: "POST",
url: "../CommonWebService.asmx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("select[id^=''MyDropDown'']").empty();
$.each(msg.d, function () {
$("select[id^=''MyDropDownSelect'']").append($("<option></option>").val(this[''IdIndexDataType'']).html(this[''DataTypeName'']));
});
$("select[id^=''MyDropDown'']").css("width", "auto");
},
error: function (e1) {
alert("Error - " + e1.toString());
}
});
}
El siguiente código resolverá su problema de ancho de la lista desplegable agregando este código después de la inserción de datos a la lista desplegable.
$("select[id^=''MyDropDown'']").css("width", "auto");
Lo arreglé en mi página de bootstrap estableciendo el min-width y el max-width en el mismo valor en la selección y luego estableciendo el select: focus en auto.
select {
min-width: 120px;
max-width: 120px;
}
select:focus {
width: auto;
}
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>
Si tiene la opción preexistente en un archivo fijo con <select> , y no desea cambiar el ancho programáticamente, puede que no tenga suerte a menos que se vuelva un poco creativo.
- Podría intentar establecer el atributo de
titlepara cada opción. Este es un HTML no estándar (si le importa esta pequeña infracción aquí), pero IE (y también Firefox) mostrará todo el texto en una ventana emergente del mouse con el mouse sobre el mouse. - Podría usar JavaScript para mostrar el texto en algún DIV posicionado cuando el usuario seleccione algo. En mi humilde opinión, esta es la forma no tan agradable de hacerlo, porque requiere JavaScript para funcionar y funciona solo después de que se ha seleccionado algo: antes de que haya un cambio en el valor, no se disparan eventos para el cuadro de selección.
- No usa ningún cuadro de selección, pero implemente su funcionalidad con otras marcas y CSS . No es mi favorito, pero quería mencionarlo.
Si está agregando una opción larga más tarde a través de JavaScript, mire aquí: Cómo actualizar el cuadro "seleccionar" HTML dinámicamente en IE
puedes intentar y resolver usando css solamente. agregando clase para seleccionar
select{ width:80px;text-overflow:''...'';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}
para obtener más referencia del estilo del cuadro de lista en un elemento particular (opción) HTML