Semantic-ui-react: Docs: blank screen when resizing web page

[ayuthmang]

If I resizing browser window width between 768 - 992 pixels I got blank page like this.
This problem was found in only react semantic only, normal html react page works normally.
I also clone and built Semantic-UI-React project and I got same problem.

Steps

1. Try to open this page https://react.semantic-ui.com/layouts/homepage
2. Open developer tools or try to resize width between 768 - 992 pixels.
3. You'll got blank page.

gif image: https://photos.app.goo.gl/2tG9BZ2miptCPLvw7

Version

v0.79.1

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[nsantosdaveiga]

Hi I have the same issue, I hope someone can respond us as soon as possible

[fspinnenhirn]

The "Homepage" starter page template defines two responsive components DesktopContainer and MobileContainer, which each render a <Responsive> root element:

// DesktopContainer
 <Responsive {...Responsive.onlyComputer}>

// ...

// MobileContainer
 <Responsive {...Responsive.onlyMobile}>

In Semantic-UI-React's Responsive add-on, the attributes that restrict visibility to a "device" are defined as:

  static onlyMobile = { minWidth: 320, maxWidth: 767 }
  static onlyTablet = { minWidth: 768, maxWidth: 991 }
  static onlyComputer = { minWidth: 992 }
  static onlyLargeScreen = { minWidth: 1200, maxWidth: 1919 }
  static onlyWidescreen = { minWidth: 1920 }

As you can see, widths between 768 - 991 fall into the "tablet" category and not into "mobile" or "computer". Nothing will display when your window width is in the tablet range, because the starter template doesn't define any components other than the two mentioned above. It's up to you to take the layout template as a starting point and modify it to your needs.

[nsantosdaveiga]

Hi @fspinnenhirn, the problem is when I use onlyTablet you have the page only on landscape mode and no on portrait...

I don't want to do something like that :

let responsiveConfig = Responsive.onlyTablet
responsiveConfig.minWidth = 0
return (
    <Responsive {...responsiveConfig}>

[fspinnenhirn]

@nsantosdaveiga I'm not sure what you're trying to do, or if this is the right forum for asking, but in general, I'd suggest to determine what you'd like to display at which breakpoints and declare your Responsive components based on that.

For example, if you only want two layout styles, one for mobile and one for everything else, you could do the following (see codesandbox for full example):

const notMobile = { minWidth: Responsive.onlyMobile.maxWidth + 1 };

const DesktopContainer = ({ children }) => (
  <Responsive {...notMobile}>{children}</Responsive>
);

const MobileContainer = ({ children }) => (
  <Responsive {...Responsive.onlyMobile}>{children}</Responsive>
);

[nsantosdaveiga]

Thanks @fspinnenhirn, I understand now this is more a uncomplete feature than a bug !

[levithomason]

@fspinnenhirn Your investigations and examples are incredibly helpful, thanks!

widths between 768 - 991 fall into the "tablet" category and not into "mobile" or "computer". Nothing will display when your window width is in the tablet range, because the starter template doesn't define any components other than the two mentioned above.

Does someone want to update the layout to be more intuitive to users? I think we should define some content for tablet as well so we don't this issue.

[Abdul-Moiz-Ansari]

Is it up for grabs? I would love to do it..