PrettyOverlay has width fixed in CSS

[Sidnei da Silva]

I wanted to host a wider widget inside a PrettyOverlay, by setting the widget size to a larger number. However the CSS on the #yui3-pretty-overlay-modal prevents it.

Ideally, it should be possible to create an overlay that takes 80% of the page by doing this:

    var overlay = new Y.lazr.PrettyOverlay({
            width: "80%")

Overriding the width to 'auto' makes it work:

#yui3-pretty-overlay-modal {
    width: auto !important;
}

[Edwin Grubbs (edwin-grubbs)]

There are several other changes that need to be made:

1. .yui-pretty-overlay would also need the width set to auto.
2. The padding would need to be increased, or javascript would need to be added to prevent the overlay from looking ridiculously narrow for narrow content.
3. Resizing the window can cause strange resizing of the overlay if the width is set to auto.
4. #yui-pretty-overlay-modal should become a css class instead of an ID selector.

[Paul Hummer (rockstar)]

Edwin, can you verify that this bug still exists in lazr-js trunk? I suspect it doesn't, since we're not using a table anymore.

[Edwin Grubbs (edwin-grubbs)]

Paul, this is still a problem in lazr-js trunk? Though the widget no longer uses a table, the yui-pretty-overlay css class sets the width to 402px, so it cannot grow with its content.

Also, since the overlay sets the z-index, WebKit browsers do not propagate click events correctly when the visibility style is set to hidden unless the z-index is also overridden to be -1. An example of this is the https://staging.launchpad.net/launchpad/+configure-bugtracker page. If you show the formoverlay by clicking on "Register an external bugtracker", dismiss the formoverlay by clicking outside of it, and then try to click on "Register an external bugtracker" again, it won't work.

[Edwin Grubbs (edwin-grubbs)]

ugh, that wasn't supposed to be a question. This definitely is still a problem in lazr-js trunk.