Como você pode desativar as barras de rolagem na caixa de diálogo jQuery UI?

Question

Alguém sabe se existe uma maneira de desativar as barras de rolagem na caixa de diálogo jquery? O conteúdo que eu tenho no div é 300 px mas o diálogo é definido como 200px. Ele coloca automaticamente as barras de rolagem, mas eu não quero que eles. Vou adicioná-lo eu mesmo para o segundo div que faz com que seja maior do que a janela. Qualquer ajuda é apreciada.

Answer 1

Você quer dizer a jQuery UI diálogo Widget ?

Você pode passar uma opção quando você cria-lo para especificar a sua altura, por exemplo.

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

Faça-o mais alto do que o conteúdo que você está colocando nele, e eu suspeito que você seria de ouro.

Answer 2

Eu resolvi o problema como este:

.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

Eu não sei exatamente o que você quer dizer com uma 'caixa de diálogo jquery', mas a maneira padrão para desativar as barras de rolagem seria para definir a propriedade estouro da div para 'escondido'

colocar isso no seu arquivo css:

div.class_name {
  overflow: hidden;
}

Answer 4

O overflow: hidden funcionou para mim. Quando apenas definir a altura / largura params as barras de rolagem que ainda aparecem dependendo do tamanho do texto e zoom.

Answer 5

Solução sem css ou altura fixa:

Eu acho que a melhor solução para o problema acima é fazer dinâmica altura de diálogo, a altura deve ajustar automaticamente de acordo com o conteúdo, quando aumenta o teor de altura modal deve aumentar. Para fazer isso, use a opção de altura "auto" fornecido pelo jQuery UI modal, que ajusta a altura modal como por conteúdo, de modo necessidade de add 'overflow: hidden' ou 'height: 350'

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

}); 

Answer 6

Esta removidas as barras de rolagem:

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

No exemplo abaixo eu também acrescentou 'redimensionável = false' para o diálogo. De modo que qualquer texto em excesso não pode ser visto através do redimensionamento de diálogo.

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