Wie können Sie Bildlaufleisten in dem jQuery UI Dialogfeld deaktivieren?

Question

Wer weiß, ob es einen Weg gibt Scrollbalken im Jquery Dialogfeld zu deaktivieren? Der Inhalt, den ich in den div haben 300 px aber der Dialog wird auf 200 Pixel. Es stellt automatisch die Bildlaufleisten, aber ich will sie nicht. Ich werde es mir auf den zweiten div hinzuzufügen, die es größer als das Fenster macht. Jede Hilfe ist willkommen.

Answer 1

Wollen Sie den jQuery UI-Dialog-Widget ?

Sie können eine Option geben, wenn Sie es schaffen, seine Höhe zu spezifizieren, z.

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

Machen Sie es größer als der Inhalt, den Sie in sie setzen sind, und ich vermute, Sie golden sein würde.

Answer 2

Ich löste das Problem wie folgt:

.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

Ich weiß nicht genau, was Sie von einem ‚Jquery Dialogfeld‘ bedeuten, aber die übliche Weise der Bildlaufleisten zu deaktivieren wäre die divs Überlauf Eigenschaft auf ‚versteckte‘

setzen diese in Ihrer CSS-Datei:

div.class_name {
  overflow: hidden;
}

Answer 4

Der Überlauf: versteckt für mich gearbeitet. Wenn nur die Höhe / Breite params die Bildlaufleisten Einstellung scheint immer noch auf Textgröße und Zoom abhängig.

Answer 5

Lösung ohne CSS oder feste Höhe:

Ich denke, die beste Lösung für oben genannte Problem ist Dialog Höhe dynamisch zu machen, sollte die Höhe passen sich automatisch nach Inhalt, wenn Gehalt steigt modal Höhe erhöhen sollte. Um dies zu tun, die Höhe „auto“ Option verwenden, zur Verfügung gestellt von JQuery UI Modal, paßt es modal Höhe nach Inhalt so braucht Add ‚overflow: hidden‘ oder "Höhe: 350

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

}); 

Answer 6

Dies entfernt die Bildlaufleisten:

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

Im Beispiel unten habe ich auch noch ‚resizable = false‘ für den Dialog. So, dass jeder Überlauftext durch Ändern der Größe des Dialogs nicht gesehen werden kann.

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