jQuery Ui dialog always has horizontal scrollbar?

Question

I am designing a form in a popup dialog (no iframe, just html) and no matter what I do there is always a scrollbar (see image below).

Currently the dialog width is being set to auto (via the dialog options) but I have tried 100% and though the window stretches, the scrollbar remains.

I read through this post about scrollbars with iframes and have tried playing with .ui-widget-overlay in firebug to no effect. Interestingly enough, there is no scrollbar in IE7, though the box is stretched to the whole screen and the scrollbar re-appears as soon as you try to resize.

Does anyone know how to fix this issue before I spend even more time on it?

I am running jquery 1.4.3 with jquery ui 1.8.6

Answer 1

I suspect that you have an element inside the dialog with 100% width and margin or padding. Then the width of the element will be 100% plus the margin and padding. See if you can set width to auto on elements with these kinds of properties.