Preview in modal window

I got this issue with setting up the preview in modal window. The problem is, the preview makes the whole modal to high, so the buttons for save/preview disappears outside the screen… so each time I want to save/preview I need to scroll the modal.

I made this preview:

On the left side you can see the modal during setting widget options (the user needs to click preview). The second version shows modal when user clicks preview button - It makes the whole modal window expanding and the button for Saving sometimes disappear from the screen. Another version of this modal is on the right with the buttons for Save/preview located below to the widget options it will be visible during preview of a widget, and user still will be able to press Save without scrolling a modal.

The question is, which solution will be the best for better flow?

Note that this modal window is used across large system, and adding some extra features like for example floating button, might create issues in other screens.


Hi, mariuszdh, welcome to the SitePoint forums.

I like the way your drawing depicts the issue. :+1: Very well done, sir.

To help with the issue, we would like to see a working page that demonstrates the issue. Do you have your code set up on a test site, by any chance? That would be very helpful if you do. Otherwise, can you assemble a working page and include it with your next post. Just remember to try it on a separate computer or separate drive to assure that it will work properly… on our computers before posting it.

If you have not done so already, please read our posting guidelines for a detailed description of a working page.

Forum POSTING Guidelines (Posting Basics): (Help us help you!)
Forum Posting Basics

The code needs to be complete and accurate to work properly. Validators for checking the HTML and CSS can be found here:

Looking forward to hearing from you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.