Jump to content

UX nightmare: nested modals in theme (default & Reno)


Recommended Posts

Hello guys,

I am using some nested PageTables and with every PageTable field the user clicks on, a modal window appears. Because every modal window's width & height are not 100%, every nesting step shrinks the window.


Does someone have any solution for this problem?

Best wishes,


Link to comment
Share on other sites

I was just overriding values in the dev tools (inspector). Unfortunately I have no PW install where there are nested lightboxes but just repeat the second half of the gif 2-3 times and you got the idea how it would look :)

The easiest way I guess is to add a custom stylesheet with the overriden values using this module:


  • Like 1
Link to comment
Share on other sites

This kinda works:

Default theme:


Reno theme:


Add this to "/site/ready.php":


$page->addHookAfter('render', function ($event) {

    if ($this->page->template != 'admin') {

    $styles = <<< HTML
    .ui-widget-overlay + div.ui-dialog {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 100% !important;
    .pw-modal-window {
        position: absolute !important;
        width: 100% !important;
        min-height: 100% !important;
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        margin: -3.35em 3em 0 0;
    body.AdminThemeDefault .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        margin: -2.66em 3em 0 0;
    html:not(.modal) {
        height: 100%;
        overflow: hidden;
    body:not(.modal) {
        overflow: auto;
        height: 100%;;
    html.modal {
        height: 100% !important;
        overflow: hidden !important;
    body.modal {
        overflow: auto !important;
        max-height: 100% !important;
        height: initial !important;
        margin-top: 0;
    body.modal .ui-dialog .ui-dialog-titlebar {
        border-top: 1px solid rgba(0, 0, 0, 0.25);

    $event->return = str_replace('</head>', $styles . PHP_EOL . '</head>', $event->return);

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...