Helper classes like show-on-small don't work as expected.

[AnupamKhosla]

It is expected, from what the name suggests, that show-on-small will only show content on small/mobile(<=600px) screens. But in reality you have to manually display: none the content for other screen sizes. E.g. consider this demo: https://jsfiddle.net/x8jd0mt4/ Even for screens >600px the text doesn't get hiidden. Same is true for other similar classes like .show-on-medium-and-down and .center-on-small-only

Heres what the docs say:

.show-on-small ------------------- Show for Mobile Only

The framework can be improved by doind the following instead:

.show-on-small {
  display: none !important;
}

@media only screen and (max-width: 600px) {
  .show-on-small {
    display: block !important;
  }
}

[Smankusors]

oh yeah I remember about these classes. That's why I usually avoid them, and use the hide-on-* classes instead.

I think these classes are supposed to be used together with hide class, but that didn't work either...

---

I think there are several solutions for this:

1. Fix the ordering in the _global.scss file. Put the hide class before any media queries utilities. Or;
2. Use the OP solution, but rename the classes to show-on-*-only (might break something)

What do you think? Both of these changes could break something 🤔 @materializecss/members

[RamonvdW]

Hi,

I would opt for backwards compatibility that can be switched off compiled time + add a solution with a new name. Personally I am also messing with these hide-on and show-on classes:

Added this for use with xlarge:

.hide-on-large-and-down { @media #{$large-and-down} { display: none !important; } }

It should also be easier to change the breakpoints: there should be only 3 numbers to divide the screen into four (small, medium, large, xlarge) sizes. If we look at the current solution there is something weird going on (_variables.scss:219) with 992.99px.. Screen sizes are in whole pixels, AFAIK. And what is "small-and-down" and "extra-large-and-up" anyway?

Maybe we should first consider the use cases. Apart from changing font size (which I disabled because it messed with card layout), margins, show/hide sidebare menu, etc. my use case is that I typically want to hide table columns on smaller screens, or replace table headings with smaller texts (switch between text-A and text-B depending on a breakpoint). What are your use cases?

Ramon

On Sat, Oct 2, 2021 at 6:45 AM Antony Kurniawan @.***> wrote:

oh yeah I remember about these classes. That's why I usually avoid them, and use the hide-on-* classes instead.

I think these classes are supposed to be used together with hide class, but that didn't work either...

I think there are several solutions for this:

1. Fix the ordering in the _global.scss https://github.com/materializecss/materialize/blob/55e4854de63c5faf2a495453d7ed5399ff4322cf/sass/components/_global.scss file. Put the hide class before any media queries utilities. Or;
2. Use the OP solution, but rename the classes to show-on-*-only (might break something)

What do you think? Both of these changes could break something 🤔 @materializecss/members https://github.com/orgs/materializecss/teams/members

— You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub https://github.com/materializecss/materialize/issues/200#issuecomment-932681011, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMBUZHTG4N3D5XKXJKYI2TTUE2E6XANCNFSM5FFTMZQA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[DanielRuf]

@RamonvdW fractional mediaqueries are something that is often used to cover some weird bugs on specific systems and in some browsers.

https://stackoverflow.com/questions/51566916/why-does-bootstrap-use-a-0-02px-difference-between-screen-size-thresholds-in-its

https://stackoverflow.com/questions/51566916/why-does-bootstrap-use-a-0-02px-difference-between-screen-size-thresholds-in-its

We had some similar cases in Foundation and used - .0001 in the past due to such problems.

See https://github.com/foundation/foundation-sites/blob/develop/scss/components/_visibility.scss#L12

[DanielRuf]

The related changes and the issue:

https://github.com/foundation/foundation-sites/commit/798377d969cb6920c8be4063e1935411e56cb77a

https://github.com/foundation/foundation-sites/issues/11313

[DanielRuf]

Might be related to zoom settings in browsers, then they do some weird stuff (subpixel rendering).