search

essetwide / material-walkthrough

A material tour (eg Inbox from Google).
https://essetwide.github.io/material-walkthrough/
Apache License 2.0
32 stars 10 forks source link

Remove global CSS rules #41

Open AirMike opened 6 years ago

AirMike commented 6 years ago

Hi,

setting global rules is not a good practice, and in this case it causes problems on some page layouts when body position is set to relative. One of problem is divs (direct child of body) that needs to be responsove in a way that on the small screen goes to full screen by setting:

   position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

What can we do to avoid setting global css rules?

oliveirafilipe commented 6 years ago

@AirMike Are you using v2 or v1?

AirMike commented 6 years ago

Sorry, its v2

menosprezzi commented 6 years ago

Yeah, we have a global rule to body element. It's because of #30 issue, where we realized:

An error occurred because the .navbar-fixed (from Materialize) nav element is oriented with position: fixed, which uses the width of the root for size calculation. The walkthrough has a #walk-wrapper element that is responsible for having the styles that leave the border coloured with that fullscreen effect, growing with a size of 300vw.

This distorts the size of the content horizontally, affecting the size of the window (and fixed elements get lost with it). The solution was to wrap the walkthrough with an element #walk-bounds that has the size of the user window, limiting the overflow of the coloured border.

And to force this wrapper element to be the size of the screen, we needed to set position: relative to the body.

AirMike commented 6 years ago

Maybe you can put it out of css file, a define some option in js file to be set if this css to body needs to be set?

menosprezzi commented 6 years ago

It can be made. But we're trying to make the library less configurable as possible :/ I'll take some time to study this case soon!

AirMike commented 6 years ago

any feedback on this?

oliveirafilipe commented 6 years ago

@menosprezzi i think that the best solution is the options in the JS (by now).

I it will solve the issue, However, we need to review it

Em seg, 21 de mai de 2018 10:21, AirMike notifications@github.com escreveu:

any feedback on this?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/essetwide/material-walkthrough/issues/41#issuecomment-390651977, or mute the thread https://github.com/notifications/unsubscribe-auth/AVAzetLPBMZe0uMKYFRSVh0ybX6q1FJ3ks5t0r90gaJpZM4SZzyQ .