Changing the size of a jquery UI dialog dynamically

Question

I have a jquery dialog . I am displaying an asp.net gridview within the dialog. I want the size of the dialog to change based on the size of the grid view.

There is a button, which shows the dialog when its clicked.

I want to set the size of the dialog such that the gridview fits in it perfectly.

   I have my javascript code below : 



 $("#ViewModalPopup").dialog({
                height: 800px,
                scrollable: true,
                width: 800,
                modal: true

            });

Here #ViewModalPopup is the div that encloses the modal popup.

I tried implementing the following logic to adjust the height of the dialog based on the size of the div :

var maxHeight = 600;
            var currentHeight = $('#ViewModalPopup').height();

if (currentHeight < maxHeight) {
                var desiredHeight = currentHeight
                }
            else
            {
                var desiredHeight = maxHeight;
                }

  $("#ViewModalPopup").dialog({
                    height: desiredheight,
                    scrollable: true,
                    width: 800,
                    modal: true

                });

But it is not working as

var currentHeight = $('#ViewModalPopup').height();

is coming out to be null from the second button click onwards.

Is there any way I can change the size of the dialog dynamically ?

Hi Jason P ! Sometimes the gridview has so many rows that it stretches from the top to the bottom of the screen. Setting a height and putting a scrollbar helps in limiting the height of the dialog. — CodeNinja
– CodeNinja, Commented Jul 29, 2013 at 15:19
So you basically want a max height. Have you tried setting the max-height on your dialog div using css? — Jason P
– Jason P, Commented Jul 29, 2013 at 15:39

Homer · Accepted Answer · 2015-06-24 16:25:01Z

9

Set like

 $("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600);

API

edited Jun 24, 2015 at 16:25

Homer

7,91014 gold badges75 silver badges114 bronze badges

answered Jul 29, 2013 at 14:43

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CodeNinja Over a year ago

Hey Thanks ! $("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600); was actually what I was looking for . Thanks for pointing me in the right direction.

Kiquenet Over a year ago

maxheight and not height ?

Awadhesh Singh · Accepted Answer · 2018-08-01 07:17:28Z

0

/* set dynamic height of modal popup and scroll according to window height */
function setModalMaxHeight(element) {
    this.$element = $(element);
    this.$content = this.$element.find('.modal-content');
    var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
    var dialogMargin = $(window).width() < 768 ? 20 : 60;
    var contentHeight = $(window).height() - (dialogMargin + borderWidth);
    var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
    var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
    var maxHeight = contentHeight - (headerHeight + footerHeight);

    this.$content.css({
        'overflow': 'hidden'
    });

    this.$element.find('.modal-body').css({
        'max-height': maxHeight,
        'overflow-y': 'auto'
    });
}
$('.modal').on('show.bs.modal', function () {
    $(this).show();
    setModalMaxHeight(this);
});
$(window).resize(function () {
    if ($('.modal.in').length != 0) {
        setModalMaxHeight($('.modal.in'));
    }
});

answered Aug 1, 2018 at 7:17

Awadhesh Singh

599 bronze badges

1 Comment

Mathews Sunny Over a year ago

Add some description

Collectives™ on Stack Overflow

Changing the size of a jquery UI dialog dynamically

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related