wake-up-neo.com

Wie können Sie Bildlaufleisten im Dialogfeld "jQuery-Benutzeroberfläche" deaktivieren?

Weiß jemand, ob es eine Möglichkeit gibt, Bildlaufleisten im Dialogfeld jquery zu deaktivieren? Der Inhalt, den ich im div habe, ist 300 px, aber der Dialog ist auf 200px eingestellt. Die Bildlaufleisten werden automatisch eingefügt, aber ich möchte sie nicht. Ich werde es selbst zum zweiten Div hinzufügen, der es größer als das Fenster macht. Jede Hilfe wird geschätzt.

31
ngreenwood6

Meinen Sie das jQuery UI Dialog Widget ?

Sie können eine Option übergeben, wenn Sie sie erstellen, um ihre Höhe anzugeben, z.

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

Machen Sie es größer als den Inhalt, den Sie in es einfügen, und ich vermute, dass Sie golden sind.

11
Paul D. Waite

Ich habe das Problem folgendermaßen gelöst:

.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

Ich weiß nicht genau, was Sie mit einem "Abfrage-Dialogfeld" meinen, aber die Standardmethode zum Deaktivieren der Bildlaufleisten besteht darin, die Überlaufeigenschaft des Div auf "versteckt" zu setzen.

fügen Sie dies in Ihre CSS-Datei ein:

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

Der Überlauf: versteckt hat bei mir funktioniert. Wenn Sie nur die Parameter für Höhe/Breite einstellen, werden die Bildlaufleisten je nach Textgröße und Zoom immer noch angezeigt.

3
DoctorEJB

Lösung ohne CSS oder feste Höhe:

Ich denke, die beste Lösung für das obige Problem ist, die Dialoghöhe dynamisch zu gestalten. Die Höhe sollte sich automatisch an den Inhalt anpassen, wenn der Inhalt größer wird. Die modale Höhe sollte größer werden. Verwenden Sie dazu die von Jquery UI modal zur Verfügung gestellte Option height "auto". Sie passt die modale Höhe gemäß dem Inhalt an, sodass "overflow: hidden" oder "height: 350" hinzugefügt werden muss.

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

}); 
2
Sanjeev

Dadurch wurden die Bildlaufleisten entfernt:

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

Im folgenden Beispiel habe ich außerdem 'resizable = false' für den Dialog hinzugefügt. Damit kein Überlauftext durch Ändern der Größe des Dialogfelds angezeigt wird.

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