Al añadir opciones a un grupo selecto, usando jQuery, cambia el tamaño?

StackOverflow https://stackoverflow.com/questions/2191547

Pregunta

En este pequeño, pero lleno ejemplo, yo estoy tratando de recrear un componente de interfaz de usuario cuadro de lista doble. Simplemente deseo de poder mover elementos de un cuadro a otro. (Sería bueno si pudiera añadir la ordenación, pero uno de los obstáculos a la vez que pienso!)

Me estoy haciendo un problema con este código en Internet Explorer 7 (FF, Chrome, Opera parece que todos funcionan bien). Cada vez que mover los elementos de una lista a otra, cambia el tamaño del cuadro de selección (psiquiatras) cada iteración. No estoy realmente seguro de a dónde voy mal aquí, ¿Alguien puede arrojar alguna idea? 

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Dual List Testing</title>
  <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  <script type="text/javascript">
   $(function(){
    //hover states on the static widgets
    $('.dual-box > .button-panel > .button').hover(
     function() { $(this).addClass('ui-state-hover'); }, 
     function() { $(this).removeClass('ui-state-hover'); }
    );    
   });

   // Hack the buttons of the dual-list to the centre (couldn't figure out a css solution)
   $(function(){
    $('#dualBox1 .button-panel').css("padding-top",($('.button-panel').height()-(34*4))/2); // v-centre
    $('#dualBox1 .button').css("margin-left", ($('.button-panel').width()-34)/2); // h-centre
   });

   $(function(){   
    $('#dualBox1 .add').click(function () {
       $('#dualBox1 .list-box:first select option:selected').appendTo('#dualBox1 .list-box:last select');
    });
    $('#dualBox1 .remove').click(function () {
      $('#dualBox1 .list-box:last select option:selected').appendTo('#dualBox1 .list-box:first select');
    });
    $('#dualBox1 .addall').click(function () {
      $('#dualBox1 .list-box:first select option').appendTo('#dualBox1 .list-box:last select');
    });
    $('#dualBox1 .removeall').click(function () {
      $('#dualBox1 .list-box:last select option').appendTo('#dualBox1 .list-box:first select');
    });
   });
  </script>
  <style type="text/css">
   .dual-box 
   {
    width: 500px;
    height: 200px;
   }

   .dual-box > .list-box
   {
    width: 45%;
    height: 100%;

    background-color:#f00;

    float: left;
   }

   .dual-box > .list-box > select
   {
    height: 100%;
    width: 100%;   
   }

   .dual-box > .button-panel
   {
    width: 10%;
    height: 100%;

    float: left;
   }   
   .dual-box > .button-panel > .button
   {
    width:auto;

    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;

    padding: 8px 0;
    cursor: pointer;
    float: left;
   }

   .dual-box > .button-panel > .button > span.ui-icon
   {
    float: left; 
    margin: 0 8px;
   }

  </style> 
 </head>
 <body>  
  <div id="dualBox1" class="dual-box">
   <div class="list-box">
    <select multiple="multiple">
     <option value="1">Test 1</option>
     <option value="2">Test 2</option>
     <option value="3">Test 3</option>
     <option value="4">Test 4</option>
    </select>
   </div>

   <div class="button-panel">
    <div class="button add ui-state-default ui-corner-all">
     <span class="ui-icon ui-icon-arrowthick-1-e"></span>
    </div>
    <div class="button addall ui-state-default ui-corner-all">
     <span class="ui-icon ui-icon-arrowthickstop-1-e"></span>
    </div>
    <div class="button removeall ui-state-default ui-corner-all">
     <span class="ui-icon ui-icon-arrowthickstop-1-w"></span>
    </div>
    <div class="button remove ui-state-default ui-corner-all">
     <span class="ui-icon ui-icon-arrowthick-1-w"></span>
    </div>
   </div>

   <div class="list-box">
    <select multiple="multiple">
     <option value="5">Test 5</option>
    </select>
   </div>
  </div>
 </body>
</html>

Gracias,

Actualización: He estado tratando de mirar esto desde todos los ángulos. Me preguntaba si mi JS tenía la culpa, pero mirando esto a través de Firefox parece descartar eso. He me encontré con un error del navegador aquí?

Actualización 2: Está bien, he seguido esto sea IE no le gustaba tamaños porcentaje que se fijará en el elemento de selección (aunque recoge este valor hasta bien origionally, se rompe después de manipular el elemento de alguna manera). La ejecución de las siguientes 2 líneas de jQuery parece resolver el problema: 

$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);

Me fue un poco la esperanza de que esto no se convierta en un corte en la parte superior de un corte, pero por desgracia, parece de. ¿Alguien tiene una forma limpia de cómo resolver este problema?

¿Fue útil?

Solución

he decidido responder a mi propia pregunta, al menos hasta que alguien ofrece una solución "mejor". La solución es la segunda actualización, donde "Hack" la posición de los elementos con el reposicionamiento de JavaScript.

  

Actualización 2: Vale, He rastreado a este   IE no le gustaba ser tamaños porcentuales a   fijarse en el elemento de selección (aunque   que recoge este valor hasta fina   origionally, se rompe después de   manipular el elemento de alguna manera).   La ejecución de las siguientes 2 líneas de   jQuery parece resolver el problema: 

$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
     

Me estaba un poco esperando para que esto no   convertido en un corte en la parte superior de un corte, pero   Por desgracia, parece que de. Hace   Alguien tiene una forma limpia de resolver   este problema?

Otros consejos

En IE el cuadro de selección es por defecto la anchura del elemento más ancho, y de la lista desplegable siempre es la misma anchura que el cuadro de selección. En la mayoría de los otros navegadores en la lista desplegable puede ser más ancha que la caja de selección, por lo que no son tan deseosos de cambiar el tamaño del cuadro de selección.

Si especifica un ancho para el cuadro de selección, IE debe seguir eso. Usted tendría que especificar una anchura mayor que el elemento más ancho, de lo contrario se pueden recortar en la lista desplegable.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top