web-dev-qa-db-fra.com

Comment désactiver les barres de défilement dans la boîte de dialogue jQuery UI?

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 le 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 n'en veux pas. Je vais l'ajouter moi-même au deuxième div qui le rend plus grand que la fenêtre. Toute aide est appréciée.

jqueryjquery-uidialogscroll
31
ngreenwood6

Voulez-vous dire le widget de dialogue jQuery UI ?

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

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

Rendez-le plus haut que le contenu que vous y mettez, et je soupçonne que vous seriez en or.

11
Paul D. Waite

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
  }
});
68
MUG4N

Je ne sais pas exactement ce que vous entendez par "boîte de dialogue jquery", mais la façon standard de désactiver les barres de défilement serait de définir la propriété de débordement de la div sur "caché"

mettez ceci dans votre fichier css:

div.class_name {
  overflow: hidden;
}
6
Paul Woolcock

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

3
DoctorEJB

Solution sans css ni hauteur fixe:

Je pense que la meilleure solution au problème ci-dessus est de rendre la hauteur de dialogue dynamique, la hauteur devrait s'ajuster automatiquement selon le contenu, lorsque le contenu augmente, la hauteur modale devrait augmenter. Pour ce faire, utilisez l'option "auto" de hauteur fournie par Jquery UI modal, il ajuste la hauteur modale selon le contenu, il faut donc ajouter "débordement: caché" ou "hauteur: 350"

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

});
2
Sanjeev

Cela 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() ;
    }
});
1
smac2020

Dans l'exemple ci-dessous, j'ai également ajouté "resizable = false" pour la boîte de dialogue. Pour que tout texte de débordement ne soit pas visible 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");
});
0
Rahul Varadkar