Howdy my dear readers, I hope you must be doing great!
Yes, I’m back here to write a new blog post after so long time. Sorry for not sharing anything with you since so long. But got busy with lot of bits and pieces. But it’s good to be busy, the busier you are the more you have to share!
Challenge:
I got a chance to use Jquery UI‘s Modal dialog in my application. Now, whenever we used to open a dialog and when we open it, it was showing scroll-bar on parent page.
Solution:
After doing a bit research and finally thought to use following solution, which worked for us:
http://forum.jquery.com/topic/opening-a-modal-dialog-shows-a-horizontal-scroll-bar [Main logic lies in open and close event!]
Basically, above solution sets body’s overflow to hidden in open event and auto in close event. Which works fine for all browsers except IE7. What’s the solution? Why?
Solution is you need to set overflow hidden of html element as well along with body.
Why so?
Excerpt from http://stackoverflow.com/questions/4443006/body-overflow-hidden-problem-in-internet-explorer-7
Applying
overflow-x:hiddenoroverflow-y:hidden;to the body element of the document will not work. Theoverflow-x:hiddenoroverflow-y:hiddenmust be applied to thehtmlelement, notbodyelement.
Happy Coding! 🙂