Troubleshooting content area modal

[blueoaks]

Hello. On this page I am using Toolset to output results of a filter (choose something from a dropdown to see result). Each of these results opens a Pro content area modal. I did this by copying the css & html from Pro modals on another page and modifying to work with Toolset. It actually works surprisingly well. I even managed to get my z-index layers set properly in relation to the navbar.

However, the last thing I need to finish it (to fully mimic) a true Pro modal, is to make the modal dialog scroll in the y direction, since some of the modal dialogs are taller than the screen, especially on smaller screens. Right now the modal dialog does not scroll.

I have uncovered that Pro is using a library called Perfect Scrollbar, and that this dynamically updates the position of the dialog in the window allowing it to scroll. Although it appears that the js for this behavior is being loaded on the page, I can see that the relevant classes are not being added to my elements by the library.

For example, data-ps-id is not being dynamically generated and added to the x-modal div.
Additionally the styles for left, bottom, top, right, height are not being updated for ps-scrollbar-x-rail and ps-scrollbar-y-rail.

Can you offer any help to get this working? Without the ability for the modal dialog to scroll the whole solution really doesnt work and I’d have to go back to using bootstrap, which I’d really rather not do now that I nearly have this working perfectly.

Thank you

[Alaa]

Hi blueoaks,

To get this working in a simple way, I suggest adding this CSS snippet into (Pro > Theme Options > CSS):

@media screen and (max-width: 980px){
    .x-modal.x-active {
        max-height: 90vh;
        overflow-y: scroll!important;
    }
}

By this way, you can control on which screen size the scrollbar will be visible and the maximum height of the modal container.

Thanks.

[blueoaks]

Thanks, this does get me closer to what I am trying to achieve.

Is there a way to fix the main page (prevent from scrolling underneath) while the modal is open? Just like it is fixed with the native content modal element? I cant seem to figure out how this is being done.

Thank you again

[paul.r]

Hi,

Regretfully, It could only be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!