Adapt Learning Community: Popup article styling

Hi everyone!

Has anyone noticed this situation and knows if there is something we can do about it?

We are using the notify-popup to display articles in popups in our course, and we ran into this issue:

We've noticed that when the notify-popup is short enough to fit inside the height of the browser window, it has this styling:

visibility: visible;
height: auto;
margin-top: -387.445px;
opacity: 1;

But when notify-popup is too tall to fit inside the browser window, it has this styling:

visibility: visible;
height: 100%;
top: 0px;
overflow-y: scroll;
opacity: 1;

The problem we experience is that, when a "small" notify-popup is containing an article with a component that alters the height of the notify-popup, for instance an Accordion, the popup sort of "jumps" up and down as the Accordion opens/closes its drawers.

I've captured the issue in a video here:

https://web.moch.dk/hta/for%20adapt%20forum/testing_popuparticle_styling.mp4

You've not said what it is you want to change it to or how it could be improved.

What is it you'd like it to do?

Show parent | Reply

Hi Oliver

I'm not sure what the best solution would be.

It's just the sort of "jumping" up and down the popup does as the Accordion opens/closes its drawers. It doesn't look that great. Maybe it could have some sort of transition between the two styles?

Show parent | Reply

I think we will just add a css transition to the notify-popup, to hide the "jumping" a bit.

Show parent | Reply

Cool. If it works, would you be able to create a pull request?

The new code will probably live here https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/less/core/notify.less

Show parent | Reply

New pull-request created:
https://github.com/adaptlearning/adapt-contrib-vanilla/pull/299

Thanks

Show parent | Reply