Scroll bar issue with jQuery modal dialog using iFrame

Question

I created a modal dialog with help of jQueryUI. Since i want to load the other page(child.html) i used iFrame here. Everything works fine.

But the issue is, it shows a scroll bar on modal dialog page as well. I tried to remove inner scroll bar by changing few CSS properties, No Use. I am struggling with this UI issue for past 10 days.

Please look at my page here.

http://sharanvijay.com/demo/Modal/html/parent.html

Here is screenshot

enter image description here

Note: Child and parent both pages uses same CSS file.

For showing model i referred

How to display an IFRAME inside a jQuery UI dialog

Can some one figure out with some fiddling tool like fire fox or any and suggest me what should i do?

user1903782 · Accepted Answer · 2012-12-15 13:10:43Z

1

Look in "/Modal/css/jquery-ui.css":

.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
zoom: 1;

The problem goes away when I unticked overflow: auto; from the developer mode in Chrome, so maybe you can delete it if neccessary.

answered Dec 15, 2012 at 13:10

user1903782

651 silver badge9 bronze badges

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

2 Comments

prakash2089 Over a year ago

Thanks, looks good. But i cant able to see my buttons at the bottom when i remove overflow:auto. Can you help my page look better aligned!

user1903782 Over a year ago

Look at:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="outline: 0px; z-index: 1002; position: absolute; height: auto; width: 850px; top: 8px; left: 74px; display: block;" tabindex="-1" role="dialog" aria-labelledby="ui-id-2">

. You might want to replace that height: auto; with a proper value like height: 640px;, for example. Try it and play with that "height" property and set a value where you feel it looks the way you're looking for.

Collectives™ on Stack Overflow

Scroll bar issue with jQuery modal dialog using iFrame

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related