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





only configuration (7)


La risposta è impostare il

autoResize:true 

proprietà durante la creazione della 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à.

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.




Se hai bisogno che funzioni in IE7, non puoi usare l'opzione non documentata, buggata e non supportata {'width':'auto'} . Invece, aggiungi quanto segue al tuo .dialog() :

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

Se .scrollWidth include il padding di destra dipende dal browser (Firefox differisce da Chrome), quindi puoi aggiungere un numero di pixel "abbastanza buono" soggettivo a .scrollWidth , o sostituirlo con la tua funzione di calcolo della larghezza.

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

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




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

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

ha fatto ciò che mi serviva per ridimensionare la larghezza della finestra di dialogo.




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

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



Funziona con jQuery UI v1.10.3

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



L'altezza è supportata sull'auto.

La larghezza non è!

Per fare un qualche tipo di auto ottieni la dimensione del div che stai mostrando e poi imposta 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);
    }







jquery jquery-ui jquery-ui-dialog