¿Cómo se pueden deshabilitar las barras de desplazamiento en el cuadro de diálogo de la interfaz de usuario jQuery?

Question

¿Alguien sabe si hay una forma de deshabilitar las barras de desplazamiento en el cuadro de diálogo de jquery? El contenido que tengo en el div es 300 px pero el diálogo está establecido en 200px. Coloca automáticamente las barras de desplazamiento pero no las quiero. Lo agregaré yo mismo al segundo div que lo hace más grande que la ventana. Cualquier ayuda es apreciada.

Answer 1

¿Quiere decir el jQuery UI dialog widget?

Puede pasar una opción cuando la crea para especificar su altura, p. Ej.

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

Hazlo más alto que el contenido que estás poniendo en él, y sospecho que estarías dorado.

Answer 2

No sé exactamente lo que quiere decir con un 'cuadro de diálogo jQuery', pero la forma estándar para desactivar las barras de desplazamiento sería la de establecer la propiedad de desbordamiento del div a 'oculto'

poner esto en su css file:

div.class_name { 
    overflow: hidden; 
} 

Answer 3

me resolvió el problema como este:

.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

El overflow: hidden trabajado para mí. Al configurar solo los parámetros de alto/ancho, las barras de desplazamiento seguirán apareciendo según el tamaño del texto y el zoom.

Answer 5

Esto elimina las barras de desplazamiento:

$("#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

Solución sin CSS o Altura fija:

Creo que la mejor solución al problema anterior es hacer que la altura de diálogo dinámico, la altura debe ajustarse automáticamente según el contenido, cuando el contenido aumenta, la altura modal debería aumentar. Para ello utilice la opción altura "auto" proporcionado por jQuery UI modal, se ajusta la altura modal según el contenido de modo necesidad de añadir 'overflow: hidden' o 'altura: 350'

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

}); 

Answer 7

En el ejemplo siguiente También agregué 'resizable = false' para el diálogo. De modo que no se puede ver ningún texto de desbordamiento al redimensionar el diálogo.

$("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"); 
});