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

Question

¿Alguien sabe si hay una manera de deshabilitar las barras de desplazamiento en el cuadro de diálogo de jQuery? El contenido que tengo en la div es de 300 px, pero el cuadro de diálogo se establece en 200 px. 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

¿Se refiere al widget de diálogo de la interfaz de usuario de jQuery ?

Puede pasar una opción cuando la cree para especificar su altura, por ejemplo,

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

Haz que sea más alto que el contenido que le estás poniendo, y sospecho que serás dorado.

Answer 2

Resolví el problema de esta manera:

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

No sé exactamente qué quiere decir con un 'cuadro de diálogo de jQuery', pero la forma estándar de deshabilitar las barras de desplazamiento sería establecer la propiedad de desbordamiento del div en 'oculta'

pon esto en tu archivo css:

div.class_name {
  overflow: hidden;
}

Answer 4

El desbordamiento: oculto funcionó para mí. Cuando solo se configuran los parámetros de altura / anchura, las barras de desplazamiento aún aparecerán según el tamaño del texto y el zoom.

Answer 5

Solución sin css o Altura fija:

Creo que la mejor solución al problema anterior es hacer que la altura del diálogo sea dinámica, la altura debería ajustarse automáticamente según el contenido, cuando el contenido aumenta, la altura modal debería aumentar. Para hacer esto usa la altura " auto " Esta opción, proporcionada por Jquery UI modal, ajusta la altura modal según el contenido, por lo que es necesario agregar 'overflow: hidden' o 'height: 350'

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

}); 

Answer 6

Esto eliminó 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 7

En el siguiente ejemplo, también agregué 'resizable = false' para el diálogo. Para que no se vea ningún texto de desbordamiento al cambiar el tamaño del 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");
});