CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
Nitin Mukesh
Nitin Mukesh

Reputation: 4266

jquery dialog defining maxHeight in percent

I have created a small project in which I have to display a modal dialog for which I have used jquery-ui dialog.

I want to define the max height for the dialog in percent. I have tried several things but none of them are working.

Please could someone help me what could be the issue.

See http://jsbin.com/otiley/1/edit

Many thanks

Upvotes: 10

Views: 13570

Answers (3)

ravisolanki07
ravisolanki07

Reputation: 647

Try this link to set height in percent.

$(document).ready(function() {
$('#testColorBox').click(function() {
    var wWidth = $(window).width();
    var dWidth = wWidth * 0.8;
    var wHeight = $(window).height();
    var dHeight = wHeight * 0.8;
    var $link = $(this);
    var $dialog = $('<div></div>')
        .load('test.html')
        .dialog({
            autoOpen: false,
            modal: true,
            title: $link.attr('title'),
            overlay: { opacity: 0.1, background: "black" },
            width: dWidth,
            height: dHeight,
            draggable: false,
                            resizable: false
        });
    $dialog.dialog('open');
    return false;
  });   
});

Upvotes: 21

eric.itzhak
eric.itzhak

Reputation: 16062

You can do so by checking window height or height of some div.

Here's an example : http://jsbin.com/otiley/4/edit

Or : 

    $(document).ready(function(){
   var height = $(window).height();
   height = height*0.20;
  $( "#dialog-modal" ).html($("#temp").html());
  $("div#dialog-modal").dialog({
      height: "auto",
      maxHeight: height,
      resizable: false,
      width: "70%",
      modal: true,
      title: "Hello"
  });
});

You can take height of any div and calculate any desired percentage.

Upvotes: 3

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

jQuery UI only allows you to express the max height in pixels. You will need to perform the calculation to a percentage in your code.

$(document).ready(function(){
  $( "#dialog-modal" ).html($("#temp").html());
  $("div#dialog-modal").dialog({
      height: "auto",
    maxHeight: $("div#dialog-modal").outerHeight() * .2,
      resizable: false,
      width: "70%",
      modal: true,
      title: "Hello"
  });
});

Upvotes: 6

Related Questions