Scroll bar in popup window

mcohare12
3 Posts
mcohare12 posted this 09 April 2020
Ask a Question

Hello,

I know that there have been a number of previous questions about how to add a popup window. I've downloaded and installed the suggested code, and the popup opens as expected. It displays perfectly in a full-size desktop monitor, but on smaller screens such as tablets or phones, the contents of the popup extend belond the top and bottom of the window. It doesn't appear to add a vertial scrollbar, so there's no way to scroll up or down to view the contents - in addition, as there's no way to scroll up to the top of the page, it's not possible to reach the cross symbol to close the popup window. Is there a way to add this? I assume it might be something to do with editing the overflow property of the popup, but I didn't want to start randomly altering the code without asking to see whether there was an easier way to do it.

Thanks,

Martin

Hello, I know that there have been a number of previous questions about how to add a popup window. I've downloaded and installed the suggested code, and the popup opens as expected. It displays perfectly in a full-size desktop monitor, but on smaller screens such as tablets or phones, the contents of the popup extend belond the top and bottom of the window. It doesn't appear to add a vertial scrollbar, so there's no way to scroll up or down to view the contents - in addition, as there's no way to scroll up to the top of the page, it's not possible to reach the cross symbol to close the popup window. Is there a way to add this? I assume it might be something to do with editing the overflow property of the popup, but I didn't want to start randomly altering the code without asking to see whether there was an easier way to do it. Thanks, Martin
popup-modal-scroll
Vote to pay developers attention to this features or issue.
7 Replies
Order By: Standard | Newest
mcohare12
3 Posts
mcohare12 posted this 09 April 2020

Hello again,

I think I've sorted this by editing the code, so I think you can close this question.

Thanks anyway,

Martin

Hello again, I think I've sorted this by editing the code, so I think you can close this question. Thanks anyway, Martin
Support Team
Support Team posted this 09 April 2020

Hi,

Nice to hear that you have found a solution, feel free to contact us on any occasion.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, Nice to hear that you have found a solution, feel free to contact us on any occasion. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
chuparskiyroman
4 Posts
chuparskiyroman posted this 18 April 2020

Hello Martin! I don't know how to write code, so I can't fix the lack of vertical scrolling on my own. Can you tell me the solution?....Thanks in advance...

Hello Martin! I don't know how to write code, so I can't fix the lack of vertical scrolling on my own. Can you tell me the solution?....Thanks in advance...
mcohare12
3 Posts
mcohare12 posted this 18 April 2020

Hello,

I'm no coding expert either, so I can't say whether this is the right way of doing it, but it seems to have worked for me. What I did was edit the code to add "overflow: auto;" to the ".modal--align" and ".modal__container" attributes. This added a scrollbar to the popup window if the contents would extend beyond the visible screen size, but doesn't if the contents would fit anyway. I then changed the ".align-vert,.align-vert.align-center { align-items: center; } " value to "align-items:top;". I did this because without it the contents were vertically centered in the popup window, which meant that you needed to scroll up to display the cross to close the popup window.

As I said, I'm no coding expert, but this seems to have worked. However, it's possible that there may be a better way of doing it!

Martin

Hello, I'm no coding expert either, so I can't say whether this is the right way of doing it, but it seems to have worked for me. What I did was edit the code to add "overflow: auto;" to the ".modal--align" and ".modal__container" attributes. This added a scrollbar to the popup window if the contents would extend beyond the visible screen size, but doesn't if the contents would fit anyway. I then changed the ".align-vert,.align-vert.align-center { align-items: center; } " value to "align-items:top;". I did this because without it the contents were vertically centered in the popup window, which meant that you needed to scroll up to display the cross to close the popup window. As I said, I'm no coding expert, but this seems to have worked. However, it's possible that there may be a better way of doing it! Martin
chuparskiyroman
4 Posts
chuparskiyroman posted this 18 April 2020

MARTIN!)))... You are a genius! You yourself figured out the code and helped me. I am very grateful to you for your help ... everything works for me! Thank you again for your help! All creativity and inspiration!

MARTIN!)))... You are a genius! You yourself figured out the code and helped me. I am very grateful to you for your help ... everything works for me! Thank you again for your help! All creativity and inspiration!
martin.heindl2
7 Posts
martin.heindl2 posted this 04 August 2020

It is great. Thank you.

It is great. Thank you.
matin_z
5 Posts
matin_z posted this 06 December 2023

Put the following codes in the css site settings.

.u-dialog {
min-height: unset !important;
max-height: calc(100vh - 100px) !important;
overflow-y: auto !important;
}

Put the following codes in the css site settings. .u-dialog { min-height: unset !important; max-height: calc(100vh - 100px) !important; overflow-y: auto !important; }
You must log in or register to leave comments

Company
Product
Themes & Templates
Nicepage
Web Design