Hacer que el cuadro de diálogo de la IU de JQuery aumente o disminuya automáticamente para ajustarse a su contenido

Question

Tengo una ventana emergente de diálogo de IU de JQuery que muestra un formulario. Al seleccionar ciertas opciones en el formulario, aparecerán nuevas opciones en el formulario, haciendo que crezca más. Esto puede conducir a un escenario en el que la página principal tiene una barra de desplazamiento y el cuadro de diálogo de la interfaz de usuario de JQuery tiene una barra de desplazamiento. Este escenario de dos barras de desplazamiento es antiestético y confuso para el usuario.

¿Cómo puedo hacer que el cuadro de diálogo de la interfaz de usuario de JQuery crezca (y posiblemente se reduzca) para que siempre se ajuste a su contenido sin mostrar una barra de desplazamiento? Preferiría que solo una barra de desplazamiento en la página principal esté visible.

Answer 1

Actualización: A partir de jQuery UI 1.8, la solución de trabajo (como se menciona en el segundo comentario) es utilizar:

width: 'auto' 

---

Uso del AUTORESIZE: verdadera opción. Voy a ilustrar:

<div id="whatup"> 
    <div id="inside">Hi there.</div> 
    </div> 
    <script> 
    $('#whatup').dialog(
     "resize", "auto" 
    ); 
    $('#whatup').dialog(); 
    setTimeout(function() { 
     $('#inside').append("Hello!<br>"); 
     setTimeout(arguments.callee, 1000); 
     }, 1000); 
    </script> 

Aquí está un ejemplo de trabajo: http://jsbin.com/ubowa

Answer 2

La respuesta es establecer la propiedad

autoResize:true 

al crear el diálogo. Para que esto funcione, no puede establecer ninguna altura para el diálogo. Por lo tanto, si establece una altura fija en píxeles para el diálogo en su método creador o mediante cualquier estilo, la propiedad autoResize no funcionará.

Answer 3

var w = $('#dialogText').text().length; 

$("#dialog").dialog('option', 'width', (w * 10)); 

hice lo que necesitaba hacer para cambiar el tamaño de la anchura de la ventana de diálogo.

Answer 4

La altura es compatible con la función automática.

El ancho no lo es!

Para hacer algún tipo de auto obtener el tamaño del div que está mostrando y luego configurar la ventana con.

En el código C# ..

TheDiv.Style["width"] = "200px"; 

    private void setWindowSize(int width, int height) 
    { 
     string widthScript = "$('.dialogDiv').dialog('option', 'width', " + width +");"; 
     string heightScript = "$('.dialogDiv').dialog('option', 'height', " + height + ");"; 

     ScriptManager.RegisterStartupScript(this.Page, this.GetType(), 
      "scriptDOWINDOWSIZE", 
      "<script type='text/javascript'>" 
      + widthScript 
      + heightScript + 
      "</script>", false); 
    } 

Answer 5

que utiliza la propiedad después de lo cual me da buenos resultados:

$('#selector').dialog({ 
    minHeight: 'auto' 
}); 

Answer 6

Esto funciona con jQuery UI v1.10.3

$("selector").dialog({height:'auto', width:'auto'}); 

Answer 7

Si necesita que funcione en IE7, no puede usar la opción undocumented, buggy, and unsupported{'width':'auto'}. En su lugar, añada lo siguiente a su .dialog():

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) } 

Si .scrollWidth incluye la parte derecha de relleno depende del navegador (Firefox se diferencia de Chrome), por lo que puede añadir un número subjetiva "lo suficientemente bueno" de los píxeles de .scrollWidth, o reemplácelo con su propia función de cálculo de ancho.

Es posible que desee incluir width: 0 entre las opciones .dialog(), ya que este método nunca reducirá el ancho, solo lo aumentará.

Probado para trabajar en IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35, y Opera 22.