- Posts: 153
- Thank you received: 8
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
alignment of popup box
- KompetenzZ
- Topic Author
- Offline
- Premium Member
Less
More
5 years 3 months ago - 5 years 3 months ago #178893
by KompetenzZ
Cheers kompetenzz
Replied by KompetenzZ on topic alignment of popup box
Hi,
I discovered that when the modal-button is opened on a small screen width, the modal-dialog is shifted down to the bottom of the page, outside of the screen. I also tried to center the modal-dialog with getbootstrap.com/docs/4.0/components/modal/#vertically-centered but it has no effect. I think this problem has to do with my custumized theme, because there isn't this problem with the standard shipped themes.
When I change in theme options "bootswatch theme" to another theme than spacelab, it works. But I would like to use my current bootswatch theme "spacelab".
Do you have any idea how to vertical align the modal-dialog to the top?
Here is a test survey with the problem in spacelab:
food-boku.limequery.com/519354?lang=de
If necessary, here is my theme and survey.
LS Version: 3.14
I discovered that when the modal-button is opened on a small screen width, the modal-dialog is shifted down to the bottom of the page, outside of the screen. I also tried to center the modal-dialog with getbootstrap.com/docs/4.0/components/modal/#vertically-centered but it has no effect. I think this problem has to do with my custumized theme, because there isn't this problem with the standard shipped themes.
When I change in theme options "bootswatch theme" to another theme than spacelab, it works. But I would like to use my current bootswatch theme "spacelab".
Do you have any idea how to vertical align the modal-dialog to the top?
Here is a test survey with the problem in spacelab:
food-boku.limequery.com/519354?lang=de
If necessary, here is my theme and survey.
LS Version: 3.14
Cheers kompetenzz
Attachments:
Last edit: 5 years 3 months ago by KompetenzZ.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 3 months ago #178895
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic alignment of popup box
Try adding something like this to custom.css:
Code:
@media (max-width: 768px) { .bd-example-modal-lg.in { position: absolute; top: 20px; bottom: auto; } }
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- KompetenzZ
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 153
- Thank you received: 8
5 years 3 months ago #178896
by KompetenzZ
Cheers kompetenzz
Replied by KompetenzZ on topic alignment of popup box
Thank you for the quick response. The only problem left now is that I cannot scroll down (on smartphone) until the end of the modal-dialog. I mean the scroll function is disabled now.
Cheers kompetenzz
The topic has been locked.
- KompetenzZ
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 153
- Thank you received: 8
5 years 3 months ago #178898
by KompetenzZ
Cheers kompetenzz
Replied by KompetenzZ on topic alignment of popup box
Together we solved this problem, I adapted it a bit, thank you very much
Here is the custom.css code if anyone needs this:
Here is the custom.css code if anyone needs this:
Code:
@media (max-width: 768px) { .modal { position: fixed; top: 14px; bottom: auto; } } @media (max-width: 768px) { .modal-body { position: relative; padding: 12px; height: 52vh; overflow-y: scroll; } }
Cheers kompetenzz
The topic has been locked.