Fai in modo che la finestra dell'interfaccia utente di JQuery cresca o si riduca automaticamente per adattarsi al suo contenuto


131

Ho una finestra di dialogo dell'interfaccia utente di JQuery che visualizza un modulo. Selezionando alcune opzioni sul modulo, nel modulo verranno visualizzate nuove opzioni che lo rendono più alto. Questo può portare a uno scenario in cui la pagina principale ha una barra di scorrimento e la finestra di dialogo dell'interfaccia utente di JQuery ha una barra di scorrimento. Questo scenario con due barre di scorrimento è sgradevole e confuso per l'utente.

Come posso aumentare (e possibilmente ridurre) la finestra di dialogo dell'interfaccia utente di JQuery per adattarla sempre al suo contenuto senza mostrare una barra di scorrimento? Preferirei che sia visibile solo una barra di scorrimento nella pagina principale.


1
Suggerirei di pubblicare un campione del codice, è difficile consigliare una soluzione senza vedere la struttura della finestra di dialogo.
Diego,

Risposte:


139

Aggiornamento: a partire da jQuery UI 1.8, la soluzione di lavoro (come menzionato nel secondo commento) è usare:

width: 'auto'

Utilizzare l'opzione autoResize: true. Illustrerò:

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

Ecco un esempio funzionante: http://jsbin.com/ubowa


Hmm .. dovrò estendere il mio FrameDialog ... è essenzialmente un metodo che crea un contenuto iframe da usare con il dialogo .. non è perfetto, ma funziona bene per un progetto di cui avevo bisogno.
Tracker 1

20
Questo non ha funzionato per me. Invece, ho impostato l'opzione "larghezza" su "auto".
Sam

+1 al commento - ha funzionato per me, e anche l'esempio funziona, quindi devo immaginare che non sia cambiato, ma hey, se tutto il resto fallisce, provalo.
CG

Questo non funziona per la larghezza, ma funziona solo per l'altezza, credo.
Walt W,

18
Questa risposta non è più valida per la versione 1.8.4 invece usa l'altezza auto forum.jquery.com/topic/dialog-auto-width
Jeff

48

La risposta è impostare il

autoResize:true 

durante la creazione della finestra di dialogo. Affinché ciò funzioni non è possibile impostare alcuna altezza per la finestra di dialogo. Quindi, se imposti un'altezza fissa in pixel per la finestra di dialogo nel suo metodo creatore o tramite uno stile, la proprietà autoResize non funzionerà.


9
Fantastico :) ma perché jQuery non l'ha messo nella loro documentazione?!. Comunque grazie.
Wahid Bitar,

attenzione, non funziona con il posizionamento tramite trigger plugin (at, my, off ecc.)
Jeffz

26

Funziona con l'interfaccia utente jQuery v1.10.3

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

Ha funzionato anche per me (v1.11.1).
Jay Cummins,

11

Ho usato la seguente proprietà che funziona bene per me:

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

2

L'altezza è supportata su auto.

La larghezza non lo è!

Per fare una sorta di auto ottenere la dimensione del div che stai mostrando e quindi impostare la finestra con.

Nel codice 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);
    }

2

Se ne hai bisogno per funzionare in IE7, non puoi usare 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 a.scrollWidth o sostituirlo con la propria funzione di calcolo della larghezza.

Potresti voler includere width: 0tra i tuoi.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.


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

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

fatto quello che mi serviva per ridimensionare la larghezza della finestra di dialogo.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.