jQuery Modal dialog Issue

Question

I have a button which opens another page in a jQuery model dialog. I used a frame here

function OpenUserDetail(userId) {

var url = 'popup.html';

var userFrame = $('<iframe class="dialogIFrame" frameborder="0" 
                marginheight="0" marginwidth="0" src="' + url + '"></iframe>');
var userDialog = userFrame.dialog(
                {
                    autoOpen: false,
                    height: 350,
                    width: 700,
                    modal: true,
                    title: 'New User',
                    open: function () {
                        userFrame.width(690);
                    },
                    close: function () {

                    }
                });
userDialog.dialog('open');

}

But it shows scroll bar. Even if i reduce height it shows. What is the issue?

Check this live link http://sharanvijay.com/demo/issue/

Update: Added scrolling='no' for frame and decreased height. Now it works in Chrome but not in firefox.

Answer 1

Try having the overflow: hidden / overflow: visible for both iframe and dialog controls

Similar answer here:

Hide horizontal scrollbar on an iframe?

Answer 2

Did you try with overflow?

overflow: hidden;