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

Question

Ho una finestra di dialogo dell'interfaccia utente JQuery che visualizza un modulo. Selezionando determinate opzioni nel modulo, nel modulo vengono visualizzate nuove opzioni che lo fanno diventare più alto. Ciò può portare a uno scenario in cui la pagina principale ha una barra di scorrimento e la finestra di dialogo dell'interfaccia utente JQuery ha una barra di scorrimento. Questo scenario a due barre di scorrimento è antiestetico e confuso per l'utente.

Come posso far crescere la finestra di dialogo dell'interfaccia utente JQuery (e possibilmente ridurla) per adattarla sempre ai suoi contenuti senza mostrare una barra di scorrimento? Preferirei che fosse visibile solo una barra di scorrimento nella pagina principale.

Answer 1

Aggiornamento: Come di jQuery UI 1.8, la soluzione di lavoro (come indicato nel secondo commento) è quello di utilizzare:

width: 'auto' 

---

Utilizzare l'autoResize: vera opzione. 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 di lavoro: http://jsbin.com/ubowa

Answer 2

La risposta è quella di impostare la proprietà

autoResize:true 

quando si crea la finestra di dialogo. Affinché funzioni, non è possibile impostare alcuna altezza per la finestra di dialogo. Quindi, se si imposta un'altezza fissa in pixel per la finestra di dialogo nel suo metodo di creazione o tramite qualsiasi stile, la proprietà autoResize non funzionerà.

Answer 3

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

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

fatto quello che mi serviva per fare per il ridimensionamento della larghezza della finestra di dialogo.

Answer 4

L'altezza è supportata per l'auto.

Larghezza no!

Per ottenere una sorta di auto, ottenere la dimensione del div che si sta visualizzando 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); 
    } 

Answer 5

ho usato la seguente proprietà, che funziona bene per me:

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

Answer 6

Questo funziona con jQuery UI v1.10.3

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

Answer 7

Se è necessario che funzioni in IE7, non è possibile utilizzare l'opzione undocumented, buggy, and unsupported{'width':'auto'}. Invece, aggiungere il seguente al vostro .dialog():

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

Sia .scrollWidth comprende il lato destro imbottitura dipende dal browser (Firefox è diverso da Chrome), quindi è possibile aggiungere un numero soggettiva "abbastanza buono" di pixel .scrollWidth o sostituirlo con la propria funzione di calcolo della larghezza.

È possibile includere width: 0 tra le opzioni .dialog(), poiché questo metodo non diminuirà mai la larghezza, ma lo aumenterà.

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