• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Creating a large overlay (100% Width from the OverlayTrigger class)


Well-known member
Is there a simple way to use the OverlayTrigger to generate an overlay with 100% width?



href = "url">

Click Me

If I use a template with a root div width of over 650 px, the overlay starts to be off centre, as does the close button.

Ideally I would like to use a width of 800px, or even better would be 100% of the root dom

Are there any params I can add to this that will allow me to extend the width of the overlay?

For instance, I would like to change the style for paricaular overlays to the following:

element.style {
    display: block;
    left: 0;
    position: fixed;
    top: 36.9px;
    width: 100%;
    z-index: 10000;
I thought this might be possible with overlay options, but I haven't had any success
can be done like this

<a href="link" data-overlayOptions="{&quot;fixed&quot;:true, &quot;className&quot;:&quot;YourOverlayClassName&quot;}" class="OverlayTrigger">title</a>
and some style in Extra.css or wherever you want

.YourOverlayClassName {max-width: 990px;} or .YourOverlayClassName {max-width: 100%;}