Ingredient Popup with sticky Background

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
31 August, 2016 at 10:19 am #21285
laurent
Participant
Hello Olly,

Is that possible to manage that the background would be not scrollable when the Ingredient Popup is open.

Because on mobile device is not very clear and stable when you scroll down for ingredient and behind the background page scroll down as well at the end…

Thank you
31 August, 2016 at 10:22 am #21296
Olly
Admin & Mod
try adding
```
body.modal-open {
overflow: hidden;
}
```
to your css somewhere
31 August, 2016 at 2:27 pm #21297
laurent
Participant
Hello Olly,

Thank you for for the code.

I just added it in the CSS file, and it work perfectly on the desktop version but
not on mobile device.

The Background is still scrolling behind the pop up.

Any ideas ?
31 August, 2016 at 3:41 pm #21298
Olly
Admin & Mod
seems to be a common problem with mobile devices.
though i can think of some js one could write, do you know of a link/site where this works for mobiles ?
maybe they have/had a better idea than what i can come up with off the top of my head

on second thoughts, what happens if you also add ?
```
html{
width: 100%;
height: 100%;
}
```
can you try that in your scenario and tell me if this works at least in your case ?
31 August, 2016 at 5:25 pm #21299
laurent
Participant
Hi Olly,

I Found this solution code on the web.
```
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute; 
}
```
Its works perfectly, and after tried with that the difference is just big.
When the ingredient Popup is open on mobile device, with the unscrollable background its more stable, easy, and confortable for users..

I can just advice you to add this option in your plug in.

There is one more little thing about the Popup, on Mobile device.
the Top of the Popup is hide by the Minicart on the top of the screen. Is that possible to add space between them ?

Thank you for your help and job.
Apprceciate
31 August, 2016 at 7:04 pm #21302
Olly
Admin & Mod
> Its works perfectly,
in your secenario/theme perhaps, but wont work generically .

.modal-open is a class that gets added/removed by wordpress
.viewport-lg is a class *your* theme adds (and presumably removes)

>the Top of the Popup is hide by the Minicart on the top of the screen. Is that possible to add space between them

no. use the z-index to hide the minicart behind the ingredients or the z-index on the ingredients popup to bring this forward.
depends on your theme whats best (though it does make sense here to increase the z-index for the AI popup in an update to at least account for the minicart)

the minicart z-index was increased a few months ago for themes that themselves use a high z-index somewhere.
it’s a race to nowhere though as it really depends on your theme . although i can make it reasonably high to start off with ,someone somewhere will have a higher one.
this will never work 100% on absolutely all themes and will have to be adjusted depending on what theme you use
31 August, 2016 at 8:25 pm #21304
laurent
Participant
Hi Olly,

Where is exactly this z-index property ?
In the CSS of WP pizza ? Admin-Style ?

Thank you
31 August, 2016 at 8:28 pm #21305
Olly
Admin & Mod
use your browsers element inspector…
5 September, 2016 at 4:52 pm #21445
laurent
Participant
Found the Z-index in the CSS Responsive.
And it works.
Thank you
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Ingredient Popup with sticky Background’ is closed to new replies.

WPPizza

Ingredient Popup with sticky Background