javascript - form - modal jquery bootstrap

Redimensionar automáticamente el diálogo de la interfaz de usuario de jQuery al ancho del contenido cargado por ajax

Question

Tengo muchos problemas para encontrar información específica y ejemplos sobre esto. Tengo una serie de cuadros de diálogo de IU de jQuery en mi aplicación adjunta a los divs que están cargados con llamadas .ajax (). Todos usan la misma llamada de configuración:

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

Solo quiero que el tamaño del diálogo se ajuste al ancho del contenido que se carga. En este momento, el ancho solo se mantiene en 300px (el valor predeterminado) y obtengo una barra de desplazamiento horizontal.

Por lo que puedo decir, "autoResize" ya no es una opción para los diálogos, y no sucede nada cuando lo especifico.

.dialog("option", "width", "500") no escribir una función separada para cada diálogo, por lo que .dialog("option", "width", "500") no es realmente una opción, ya que cada cuadro de diálogo tendrá un ancho diferente.

Especificar el width: ''auto'' para las opciones de diálogo solo hace que los cuadros de diálogo ocupen el 100% del ancho de la ventana del navegador.

¿Cuáles son mis opciones? Estoy usando jQuery 1.4.1 con jQuery UI 1.8rc1. Parece que esto debería ser algo realmente fácil.

EDITAR: he implementado una solución alternativa kludgy para esto, pero todavía estoy buscando una solución mejor.

Answer 1

Acabo de escribir una pequeña aplicación de muestra usando JQuery 1.4.1 y UI 1.8rc1. Todo lo que hice fue especificar el constructor como:

var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:''auto''
});

Sé que dijiste que esto hace que ocupe el 100% del ancho de la ventana del navegador, pero funciona bien aquí, probado en FF3.6, Chrome e IE8.

No estoy haciendo llamadas AJAX, solo cambio manualmente el código HTML del diálogo, pero no creo que eso cause ningún problema. ¿Podría algún otro ajuste de CSS eliminarlo?

El único problema con esto es que hace que el ancho esté fuera del centro, pero encontré este ticket de soporte donde proporcionan una solución para colocar la instrucción de dialog(''open'') en un setTimeout para solucionar el problema.

Aquí está el contenido de mi etiqueta de la cabeza:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        var theDialog = $(".mydialog").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: ''auto''
        });

        $(''#one'').click(function(){
            theDialog.html(''some random text'').dialog(''open'');
        });

        $(''#two'').click(function(){
            theDialog.html(''<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>'').dialog(''open'');
        });

        $(''#three'').click(function(){
            //this is only call where off-centre is noticeable so use setTimeout
            theDialog.html(''<img src="./random.gif" width="500px" height="500px" />'');
            setTimeout(function(){ theDialog.dialog(''open'') }, 100);;
        });
     });
</script>

Descargué el js y el css para Jquery UI desde http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip . y el cuerpo:

<div class=''mydialog''></div>
<a href=''#'' id=''one''>test1</a>
<a href=''#'' id=''two''>test2</a>
<a href=''#'' id=''three''>test3</a>

Answer 2

Así es como lo hice:

Diálogo jQuery UI adaptable (y una solución para el error maxWidth)

Reparando maxWidth & width: error automático.

Answer 3

Me imagino poniendo flotador: la izquierda para el diálogo funcionará. Presumiblemente, el diálogo está completamente posicionado por el complemento, en cuyo caso su posición estará determinada por esto, pero el efecto colateral de los elementos flotantes, que solo tienen el ancho que necesitan para contener el contenido, seguirá teniendo efecto.

Esto debería funcionar si solo pones una regla como

.myDialog {float:left}

en tu hoja de estilo, aunque es posible que debas configurarlo usando jQuery

Answer 4

Por alguna razón, seguí teniendo este problema de ancho de página completo con IE7, así que hice este truco:

var tag = $("<div></div>");
//IE7 workaround
var w;
if (navigator.appVersion.indexOf("MSIE 7.") != -1)
    w = 400;
else
    w = "auto";

tag.html(''My message'').dialog({
    width: w,
    maxWidth: 600,
    ...

Answer 5

Puede evitar el problema del 100% de ancho especificando un ancho máximo. La opción maxWidth no parece funcionar; por lo tanto, establezca la propiedad CSS max-width en el widget de diálogo.

En caso de que también desee restringir la altura máxima, use la opción maxHeight . Mostrará correctamente una barra de desplazamiento cuando sea necesario.

$(function() {
  var $dialog = $("#dialog");
  $dialog.dialog({
    autoOpen: false,
    modal: true,
    width: "auto"
  });
  /*
   * max-width should be set on dialog widget because maxWidth option has known issues
   * max-height should be set using maxHeight option
   */
  $dialog.dialog("widget").css("max-width", $(window).width() - 100);
  $dialog.dialog("option", "maxHeight", $(window).height() - 100);
  $(".test-link").on("click", function(e) {
    e.preventDefault();
    $dialog.html($(this.hash).html());
    // if you change the content of dialog after it is created then reset the left
    // coordinate otherwise content only grows up to the right edge of screen
    $dialog.dialog("widget").css({ left: 0 });
    $dialog.dialog("open");
  });
});

@import url("http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog"></div>

<!-- test links -->

<p>
  <a href="#content-1" class="test-link">Image (Landscape)</a>
  <a href="#content-2" class="test-link">Image (Portrait)</a>
  <a href="#content-3" class="test-link">Text Content (Small)</a>
  <a href="#content-4" class="test-link">Text Content (Large)</a>
</p>
<p>If you are viewing in Stack Snippets > Full page then reload the snippet so that window height is recalculated (Right click > Reload frame).</p>

<!-- sample content -->

<div id="content-1" style="display: none;">
  <img src="http://i.stack.imgur.com/5leq2.jpg" width="450" height="300">
</div>

<div id="content-2" style="display: none;">
  <img src="http://i.stack.imgur.com/9pVkn.jpg" width="300" height="400">
</div>

<div id="content-3" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
</div>

<div id="content-4" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
  <p>Aenean eu magna tempor, pellentesque arcu eget, mattis enim. Cras at volutpat mi. Aenean id placerat felis, quis imperdiet nunc. Aenean a iaculis est, quis lacinia nisl. Sed aliquet sem eget justo convallis congue. Quisque rhoncus nulla sit amet cursus maximus. Phasellus nec auctor urna. Nam mattis felis et diam finibus consectetur. Etiam finibus dignissim vestibulum. In eu urna mattis dui pharetra iaculis. Nam eleifend odio et massa imperdiet, et hendrerit mauris tempor. Quisque sapien lorem, dapibus ut ultricies ut, hendrerit in nulla. Nunc lobortis mi libero, nec tincidunt lacus pretium at. Aliquam erat volutpat.</p>
  <p>Fusce eleifend enim nec massa porttitor tempor a eget neque. Quisque vel augue ac urna posuere iaculis. Morbi pharetra augue ac interdum pulvinar. Duis vel posuere risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae lectus non nisl iaculis volutpat nec vitae ante. Maecenas quis condimentum elit. Sed nisl urna, convallis ut pellentesque sit amet, pellentesque eget quam. Pellentesque ornare sapien ac scelerisque pretium. Pellentesque metus tortor, accumsan in vehicula iaculis, efficitur eget nisi. Donec tincidunt, felis vel viverra convallis, lectus lectus elementum magna, faucibus viverra risus nulla in dolor.</p>
  <p>Duis tristique sapien ut commodo laoreet. In vel sapien dui. Vestibulum non bibendum erat. Etiam iaculis vehicula accumsan. Phasellus finibus, elit et molestie luctus, massa arcu tempor nulla, id hendrerit metus mauris non mi. Morbi a ultricies magna. Proin condimentum suscipit urna eu maximus. Mauris condimentum massa ac egestas fermentum. Praesent faucibus a neque a molestie. Integer sed diam at eros accumsan convallis.</p>
</div>

Answer 6

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

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

Si .scrollWidth incluye 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 a .scrollWidth , o reemplazarlo con su propia función de cálculo de ancho.

Es posible que desee incluir width: 0 entre las opciones de .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.

Answer 7

Tengo el mismo problema y tengo una posición: absoluta en tu .ui-dialog {} css no era suficiente. Me di cuenta de que la posición: relativo se estaba estableciendo en el estilo directo del elemento real, por lo que la definición .ui-dialog css se sobrescribía. Configuración de la posición: absoluta en el div Iba a hacer un diálogo estáticamente tampoco funcionó.

Al final, cambié dos colocados en mi jQuery local para que esto funcione.

Cambié la siguiente línea en jQuery para que sea:

elem.style.position = "absolute";

en https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62

Además, dado que mi cuadro de diálogo estaba configurado para ser arrastrable, tuve que cambiar esta línea también en jQuery-ui para ser:

this.element[0].style.position = ''absolute'';

en https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48

Tal vez al pasar por el estilo que tengo más completamente arreglaría las cosas, pero pensé que compartiría cómo conseguí que funcionara.

Answer 8

Todo lo que necesitas hacer es solo agregar:

width: ''65%'',

Answer 9

Tuve el mismo problema cuando actualicé jquery UI a 1.8.1 sin actualizar el tema correspondiente. Solo es necesario actualizar el tema y "auto" funciona nuevamente.

Answer 10

Tuve el mismo problema y gracias a que usted mencionó que el problema real estaba relacionado con CSS, encontré el problema:

Tener position:relative lugar de position:absolute en su .ui-dialog regla CSS hace que el diálogo y el width:''auto'' comporten width:''auto'' manera extraña.

.ui-dialog { position: absolute;}

Answer 11

Tuve un problema similar.

Establecer el width en "auto" funcionó bien para mí, pero cuando el cuadro de diálogo contenía una gran cantidad de texto lo hizo abarcar todo el ancho de la página, ignorando la configuración de maxWidth .

Establecer maxWidth en create funciona bien:

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won''t work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});

Answer 12

Yo tuve este problema también.

Lo tengo trabajando con esto:

.ui-dialog{
    display:inline-block;
}