Come disattivare le barre di scorrimento nella finestra di dialogo dell'interfaccia utente jQuery?

Question

Qualcuno sa se esiste un modo per disattivare le barre di scorrimento nella finestra di dialogo jquery? Il contenuto che ho nel div è 300 px ma la finestra di dialogo è impostata su 200px. Mette automaticamente le barre di scorrimento ma non le voglio. Lo aggiungerò io stesso al secondo div che lo rende più grande della finestra. Qualsiasi aiuto è apprezzato.

Answer 1

Intendi lo jQuery UI dialog widget?

È possibile passare un'opzione quando la si crea per specificare la sua altezza, ad es.

$('.selector').dialog({ height: 350 }); 

Renderlo più alto del contenuto che stai mettendo in esso, e ho il sospetto che saresti d'oro.

Answer 2

Non so esattamente cosa si intende per una 'finestra di dialogo jQuery', ma il modo standard per disattivare le barre di scorrimento potrebbe essere quella di impostare la proprietà di overflow del div a 'nascosto'

mettere questo nel vostro file css:

div.class_name { 
    overflow: hidden; 
} 

Answer 3

ho risolto il problema in questo modo:

.dialog({ 
    title: $(this).attr("data-dialog-title"), 
    closeOnEscape: true, 
    close: function() { $(this).remove() }, 
    draggable: true, 
    position: 'center', 
    width: 500, 
    height: 'auto', 
    modal: true, 
    open: function (event, ui) { 
    $('#myDialogId').css('overflow', 'hidden'); //this line does the actual hiding 
    } 
}); 

Answer 4

L'overflow: hidden lavorato per me. Quando si impostano solo i parametri altezza/larghezza, le barre di scorrimento appaiono ancora a seconda delle dimensioni del testo e dello zoom.

Answer 5

Questa rimosso le barre di scorrimento:

$("#dialog").dialog({ 
    autoOpen: false, 
    resizable: false, 
    dialogClass: 'info', 
    height: 'auto', 
    width: 'auto', 
    show: { effect: "blind", duration: 1000 }, 
    hide: {effect: "explode", duration: 1000 }, 
    draggable: true, 
    open: function (event, ui) { 
     $(this).dialog('open'); 
    }, 
    close: function (event, ui) { 
     cleanup() ; 
    } 
}); 

Answer 6

Soluzione senza CSS o fisso Altezza:

Penso che la soluzione migliore per problema di cui sopra è quello di rendere dialogo altezza dinamica, l'altezza dovrebbe regolare automaticamente come per il contenuto, quando il contenuto aumenta l'altezza modale dovrebbe aumentare. Per fare questo utilizzare l'opzione altezza "auto" fornito da jQuery UI modale, si regola l'altezza modale come per il contenuto in modo da necessità di add 'overflow: hidden' o 'altezza: 350'

$("#dialog").dialog({ 
modal : true, 
height:"auto" 

}); 

Answer 7

Nell'esempio sottostante Ho anche aggiunto 'resizable = false' per la finestra di dialogo. In modo che qualsiasi testo di overflow non possa essere visto ridimensionando la finestra di dialogo.

$("a#registerServerStudio , a#regServer").click(function(e) { 
    //alert("login using POST is Clicked"); 
    e.preventDefault(); 
    registerSuccess = false; 

    regSSDlg = $("#regSS").dialog({ 
     autoOpen: false, 
     height: 280, 
     width: 420, 
     modal: true, 
    resizable: false, 
     buttons: { 
     }, 
     close: function() { 
     registerSuccess = false; 
     }, 
    show:{effect:'bounce', duration: 100}, 

    }); 
    $('#regSS').css('overflow', 'hidden'); 
    regSSDlg.prev(".ui-dialog-titlebar").css({"background":"#47669E", "color":"white", "font-size":"13px", "font-weight":"normal"}) ; 

    regSSDlg.dialog("open"); 
});