Comment désactiver les barres de défilement dans la boîte de dialogue de l'interface utilisateur de jQuery?

Question

Est-ce que quelqu'un sait s'il existe un moyen de désactiver les barres de défilement dans la boîte de dialogue jQuery? Le contenu que j'ai dans la div est de 300 px mais la boîte de dialogue est définie sur 200 px. Il met automatiquement les barres de défilement mais je ne les veux pas. Je vais l'ajouter moi-même à la deuxième div qui le rend plus grand que la fenêtre. Toute aide est appréciée.

Answer 1

Voulez-vous dire le widget de dialogue de l'interface utilisateur jQuery ?

Vous pouvez transmettre une option lorsque vous la créez pour spécifier sa hauteur, par exemple.

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

Faites-le plus grand que le contenu que vous y mettez, et je suppose que vous serez en or.

Answer 2

J'ai résolu le problème comme ceci:

.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

Je ne sais pas exactement ce que vous entendez par une "boîte de dialogue jquery", mais la méthode standard pour désactiver les barres de défilement consiste à définir la propriété de dépassement de la div sur "hidden"

mettez ceci dans votre fichier css:

div.class_name {
  overflow: hidden;
}

Answer 4

Le débordement: caché a fonctionné pour moi. Lorsque vous définissez uniquement les paramètres hauteur / largeur, les barres de défilement apparaissent toujours en fonction de la taille du texte et du zoom.

Answer 5

Solution sans css ni hauteur fixe:

Je pense que la meilleure solution au problème ci-dessus consiste à rendre la hauteur du dialogue dynamique, la hauteur doit s’ajuster automatiquement en fonction du contenu. Lorsque le contenu augmente, la hauteur modale doit augmenter. Pour ce faire, utilisez la hauteur " auto " option fournie par l'interface modale Jquery UI, elle ajuste la hauteur modale en fonction du contenu; il est donc nécessaire d'ajouter un 'dépassement de capacité: masqué' ou une 'hauteur: 350'

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

}); 

Answer 6

Ceci a supprimé les barres de défilement:

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

Dans l'exemple ci-dessous, j'ai également ajouté 'resizable = false' pour la boîte de dialogue. Pour que tout texte en excès ne puisse pas être vu en redimensionnant la boîte de dialogue.

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