Ridimensiona automaticamente la finestra di dialogo dell'interfaccia utente jQuery in base alla larghezza del contenuto caricato da Ajax

Ho molti problemi a trovare informazioni specifiche ed esempi su questo. Ho un certo numero di finestre di dialogo dell'interfaccia utente jQuery nella mia applicazione associate a div caricati con chiamate .ajax (). Tutti usano la stessa chiamata di installazione:

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

Voglio solo che la finestra di dialogo venga ridimensionata in base alla larghezza del contenuto che viene caricato. In questo momento, la larghezza rimane a 300 px (impostazione predefinita) e ottengo una barra di scorrimento orizzontale.

Per quanto ne so, "ridimensionamento automatico" non è più un'opzione per le finestre di dialogo e non succede nulla quando lo specifico.

Sto cercando di non scrivere una funzione separata per ogni finestra di dialogo, quindi .dialog("option", "width", "500")non è davvero un'opzione, poiché ogni finestra di dialogo avrà una larghezza diversa.

La specifica width: 'auto'delle opzioni della finestra di dialogo fa sì che le finestre di dialogo occupino il 100% della larghezza della finestra del browser.

Quali sono le mie opzioni? Sto usando jQuery 1.4.1 con jQuery UI 1.8rc1. Sembra che questo dovrebbe essere qualcosa di veramente facile.

EDIT: Ho implementato una soluzione alternativa per questo, ma sto ancora cercando una soluzione migliore.

Ho appena scritto una piccola app di esempio usando JQuery 1.4.1 e UI 1.8rc1. Tutto quello che ho fatto è stato specificare il costruttore come:

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

So che hai detto che questo fa sì che occupi il 100% di larghezza della finestra del browser, ma funziona bene qui, testato in FF3.6, Chrome e IE8.

Non sto effettuando chiamate AJAX, sto solo modificando manualmente l'HTML della finestra di dialogo ma non credo che causerà alcun problema. Qualche altra impostazione css potrebbe farla finita?

L'unico problema è che rende la larghezza decentrata ma ho trovato questo ticket di supporto in cui forniscono una soluzione alternativa per posizionare l' dialog('open')istruzione in un setTimeout per risolvere il problema.

Ecco il contenuto del mio tag head:

<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>

Ho scaricato js e css per l'interfaccia utente di Jquery da http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip . e il corpo:

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

Ho avuto lo stesso problema e grazie a te che hai menzionato che il vero problema era legato ai CSS ho riscontrato il problema:

Avere position:relativeinvece position:absolutenella .ui-dialogregola CSS rende la finestra di dialogo e si width:'auto'comporta in modo strano.

.ui-dialog { position: absolute;}

Ecco come l'ho fatto:

Finestra di dialogo dell'interfaccia utente jQuery reattiva (e una correzione per il bug maxWidth)

Correzione di maxWidth & width: auto bug.

Immagino che l'impostazione float: a sinistra per la finestra di dialogo funzionerà. Presumibilmente la finestra di dialogo è assolutamente posizionata dal plug-in, nel qual caso la sua posizione sarà determinata da questo, ma l'effetto collaterale del float - rendendo gli elementi solo la larghezza necessaria per contenere il contenuto - avrà comunque effetto.

Questo dovrebbe funzionare se hai appena messo una regola come

.myDialog {float:left}

nel foglio di stile, anche se potrebbe essere necessario impostarlo utilizzando jQuery

Ho avuto lo stesso problema quando ho aggiornato l'interfaccia utente di jquery alla 1.8.1 senza aggiornare il tema corrispondente. È necessario solo aggiornare anche il tema e "auto" funziona di nuovo.

Per qualche motivo ho continuato ad avere questo problema di larghezza di pagina intera con IE7, quindi ho fatto questo trucco:

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,
    ...

È possibile evitare il problema della larghezza del 100% specificando una larghezza massima. L' maxWidthopzione non sembra funzionare; quindi imposta invece la max-widthproprietà CSS sul widget della finestra di dialogo.

Nel caso in cui si desideri limitare anche l'altezza massima, utilizzare l' maxHeightopzione. Mostrerà correttamente una barra di scorrimento quando necessario.

$(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("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://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="https://i.stack.imgur.com/5leq2.jpg" width="450" height="300">
</div>

<div id="content-2" style="display: none;">
  <img src="https://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>

Ho avuto un problema simile.

Impostazione widthper "auto"bene ha funzionato per me, ma quando la finestra di dialogo conteneva un sacco di testo è reso abbracciano l'intera larghezza della pagina, ignorando l' maxWidthimpostazione.

Impostazione maxWidthsulla createfunziona bene però:

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

Ho avuto anche questo problema.

Ho capito che funziona con questo:

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

Tutto quello che devi fare è solo aggiungere:

width: '65%',

Ho lo stesso problema e posizione: assoluto nel tuo .ui-dialog {} css non era abbastanza. Ho notato quella posizione: il relativo veniva impostato sullo stile diretto dell'elemento reale, quindi la definizione cui .ui-dialog veniva sovrascritta. Posizione di impostazione: assoluta sul div che stavo per fare staticamente un dialogo, inoltre non ha funzionato.

Alla fine ho cambiato due posti nel mio jQuery locale per farlo funzionare.

Ho cambiato la seguente riga in jQuery per essere:

elem.style.position = "absolute";

all'indirizzo https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62

Inoltre, poiché il mio dialogo era impostato su trascinabile, ho dovuto cambiare anche questa linea in jQuery-ui per essere:

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

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

Forse passare attraverso lo stile che ho più a fondo risolverebbe le cose, ma ho pensato di condividere il modo in cui l'ho fatto funzionare.

Se ne hai bisogno per funzionare in IE7, non puoi utilizzare l' opzione non documentata, buggy e non supportata {'width':'auto'} . Invece, aggiungi quanto segue al tuo .dialog():

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

La presenza .scrollWidtho meno dell'imbottitura sul lato destro dipende dal browser (Firefox differisce da Chrome), quindi è possibile aggiungere un numero soggettivo "abbastanza buono" di pixel .scrollWidtho sostituirlo con la propria funzione di calcolo della larghezza.

Potresti voler includere width: 0tra le tue .dialog()opzioni, poiché questo metodo non ridurrà mai la larghezza, ma solo aumentarla.

Testato per funzionare su IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 e Opera 22.

modifica questo qui sotto:

$("#message").dialog({
	autoOpen:false,
	modal:true,
	resizable: false,
	width:'80%',