Hacer que JQuery UI Dialog crezca o se reduzca automáticamente para ajustarse a su contenido

131

Tengo una ventana emergente de diálogo JQuery UI que muestra un formulario. Al seleccionar ciertas opciones en el formulario, aparecerán nuevas opciones que harán 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 JQuery UI 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 JQuery UI 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 sea visible.

jquery jquery-ui jquery-ui-dialog

— MikeN
fuente

1

Sugeriría publicar una muestra del código, es difícil recomendar una solución sin ver la estructura del diálogo.

— Diego

139

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

width: 'auto'

Use la opción autoResize: true. 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í hay un ejemplo de trabajo: http://jsbin.com/ubowa

— cgp
fuente

Hmm ... tendrá que extender mi FrameDialog ... es esencialmente un método que crea un contenido iframed para usar con el diálogo ... no es perfecto, pero funciona bien para un proyecto para el que lo necesitaba.

— Rastreador1

20

Esto no funcionó para mí. En cambio, configuré la opción "ancho" en "auto".

— Sam

+1 al comentario: funcionó para mí, y el ejemplo también funciona, así que tengo que imaginar que esto no ha cambiado, pero bueno, si todo lo demás falla, inténtalo.

— cgp

Sin embargo, esto no funciona para el ancho, solo funciona para la altura, creo.

— Walt W

18

Esta respuesta ya no es válida para la versión 1.8.4, sino que usa height auto forum.jquery.com/topic/dialog-auto-width

— Jeff

48

La respuesta es establecer el

autoResize:true

propiedad al crear el diálogo. Para que esto funcione, no puede establecer ninguna altura para el diálogo. Entonces, si establece una altura fija en píxeles para el cuadro de diálogo en su método de creación o mediante cualquier estilo, la propiedad autoResize no funcionará.

— MikeN
fuente

9

Fantástico :) pero ¿por qué jQuery no puso eso en su documentación? De todos modos gracias.

— Wahid Bitar

cuidado, no funciona con posicionamiento mediante complemento de activación (at, my, off, etc.)

— Jeffz

26

Esto funciona con jQuery UI v1.10.3

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

— IlludiumPu36
fuente

También funcionó para mí (v1.11.1).

— Jay Cummins

11

Usé la siguiente propiedad que funciona bien para mí:

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

— emolah
fuente

2

La altura es compatible con auto.

Ancho no lo es!

Para hacer algún tipo de auto, obtenga el tamaño del div que está mostrando y luego configure 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);
    }

— El demz
fuente

2

Si necesita que funcione en IE7, no puede usar la opción no documentada, con errores y sin soporte {'width':'auto'} . En su lugar, agregue lo siguiente a su .dialog():

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

Si .scrollWidthincluye el relleno del lado derecho depende del navegador (Firefox difiere de Chrome), por lo que puede agregar un número subjetivo "suficientemente bueno" de píxeles para.scrollWidth o reemplazarlo con su propia función de cálculo de ancho.

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

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

— Vladimir Kornea
fuente

1

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

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

Hice lo que necesitaba hacer para cambiar el tamaño del ancho del diálogo.

— usuario596393
fuente