web-dev-qa-db-fra.com

Hauteur de la boîte de dialogue Jquery et barre de défilement verticale

Je retourne des données via ajax pour remplir une boîte de dialogue jQuery. Le ajax est fondamentalement une table html avec un nombre variable de lignes.

J'aimerais que la boîte de dialogue se développe pour afficher les lignes, jusqu'à une certaine taille verticale (350 pixels), auquel cas une barre de défilement verticale devrait apparaître.

Cela semble donc fonctionner correctement - la boîte de dialogue est redimensionnée correctement en fonction du nombre de lignes. Mais je n’obtiens jamais la barre de défilement verticale - donc si j’ai 20 rangées, je ne peux voir que les 9 dernières.

Comment puis-je forcer la barre de défilement verticale si la hauteur aurait été supérieure à 350px?

$.ajax({
    type: 'POST',
    url: 'myurl',
    data: postdata,
    dataType: 'json',
    success: function (result) {
        if (result.success && result.data) {
            var $dialog = $('<div></div>').html(result.data).dialog({
                autoOpen: false,
                title: 'History',
                modal: true,
                height: Math.min((result.rows * 25) + 150, 350),
                width: 800
            });
            $dialog.dialog('open');

        }
        event.preventDefault();
    }
});
javascriptjquerycssdialog
7
JonoB

Vous devriez ajouter la propriété css overflow:auto pour content div.

$("<div></div>").css({height:"350px", overflow:"auto"});

Si vous avez besoin UNIQUEMENT du défilement vertical overflow-y:auto et overflow-x:hidden

23
Eugene Trofimenko

utilisez css max-height: 350px; et débordement: auto; .. ça devrait aller

4
yeahman

Je ne voulais pas donner une hauteur px fixe donc j'ai trouvé une solution donnant au modèle les règles css suivantes.

.modal {
  display: inline-block !important;
  max-height: 90%;
  overflow: auto;/* Or scroll, depending on your needs*/}

J'espère que cela fonctionne pour vous.

0
Carlos Júlio

Pour moi a travaillé:

    .jconfirm-holder { 
       overflow-y: auto; 
   }
0
chronikum

Je sais que c'est un peu vieux, mais rien de tout cela n'a fonctionné pour moi. Voici ce qui fonctionne à partir de l'interface utilisateur jQuery 1.10.

 $("#helptext").dialog({
        title: 'Blog Help',
        autoOpen: false,
        width: '90%',
        height: ($(window).height() - 200),
        modal: true
  });

Ajustez la hauteur et la largeur comme vous le souhaitez. J'ai beaucoup de texte dans ma boîte de dialogue et je ne voulais pas faire défiler la page entière. 

0
Robert