Come è possibile disabilitare le barre di scorrimento nella finestra di dialogo dell'interfaccia utente di jQuery?

Question

Qualcuno sa se esiste un modo per disabilitare le barre di scorrimento nella finestra di dialogo di jquery? Il contenuto che ho nel div è di 300 px ma la finestra di dialogo è impostata su 200px. Mette automaticamente le barre di scorrimento ma non le voglio. Lo aggiungerò io stesso al secondo div che lo rende più grande della finestra. Qualsiasi aiuto è apprezzato.

Answer 1

Intendi il widget della finestra di dialogo dell'interfaccia utente jQuery ?

Puoi passare un'opzione quando la crei per specificarne l'altezza, ad esempio

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

Rendilo più alto del contenuto che stai inserendo, e ho il sospetto che tu sia dorato.

Answer 2

Ho risolto il problema in questo modo:

.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

Non so esattamente cosa intendi con una 'finestra di dialogo jquery', ma il modo standard per disabilitare le barre di scorrimento sarebbe impostare la proprietà di overflow del div su 'nascosto'

inseriscilo nel tuo file css:

div.class_name {
  overflow: hidden;
}

Answer 4

L'overflow: nascosto ha funzionato per me. Quando si impostano solo i parametri di altezza / larghezza, le barre di scorrimento vengono comunque visualizzate in base alla dimensione del testo e allo zoom.

Answer 5

Soluzione senza css o altezza fissa:

Penso che la soluzione migliore al problema precedente sia quella di rendere dinamica l'altezza della finestra di dialogo, l'altezza dovrebbe adattarsi automaticamente secondo il contenuto, quando il contenuto aumenta l'altezza modale dovrebbe aumentare. Per fare ciò usa l'altezza "auto" opzione fornita dall'interfaccia utente Jquery modale, regola l'altezza modale in base al contenuto, quindi è necessario aggiungere 'overflow: nascosto' o 'altezza: 350'

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

}); 

Answer 6

Ciò ha rimosso le barre di scorrimento:

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

Nell'esempio seguente ho anche aggiunto 'resizable = false' per la finestra di dialogo. In modo che non sia possibile visualizzare alcun testo di overflow ridimensionando la finestra di dialogo.

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