css bug in travel-list

[FelicixAwe]

Hi, I'm following the tutorial on the Udemy. The css file gives me a large white space down there. Everything above the white space is html element. So I suspect height: 100vh doesn't work properly. But I'm not a css expert and cannot figure out how to fix it. I tried on Firefox but having the same issue.

[whyafan]

Can you share your code using https://codesandbox.io/? I'll be able to help out once I see the code.

[FelicixAwe]

Can you share your code using https://codesandbox.io/? I'll be able to help out once I see the code.

Sure. https://codesandbox.io/p/sandbox/travel-list-7l4hj8?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clqyboc3p0006356iz0dt2duw%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clqyboc3p0002356ig6ivxm4c%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clqyboc3p0003356i9i2vuot0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clqyboc3p0005356i5gnvdqu1%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clqyboc3p0002356ig6ivxm4c%2522%253A%257B%2522id%2522%253A%2522clqyboc3p0002356ig6ivxm4c%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clqyboc3p0005356i5gnvdqu1%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clqyboc3p0004356id0zhtgcn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clqyboc3p0005356i5gnvdqu1%2522%252C%2522activeTabId%2522%253A%2522clqyboc3p0004356id0zhtgcn%2522%257D%252C%2522clqyboc3p0003356i9i2vuot0%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clqyboc3p0003356i9i2vuot0%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[agg-geek]

You probably missed using <div className="app"> in the App component JSX.

[dowdy]

this is a bug, looks terrible in chrome on windows

[arp690]

@dowdy I just made the CSS class .list ul overflow: hidden, be sure that your className in App.js is "app" all lowercase

[heedrhiss]

There is a similar issue on the usepopcorn as well [image: image.png]

On Fri, 8 Mar 2024 at 15:45, arp690 @.***> wrote:

I just made the CSS class .list ul overflow: hidden, be sure that your className in App.js is "app" all lowercase

— Reply to this email directly, view it on GitHub https://github.com/jonasschmedtmann/ultimate-react-course/issues/44#issuecomment-1985819438, or unsubscribe https://github.com/notifications/unsubscribe-auth/BAUQGL262V4IE6M4V3FRHGTYXHFJLAVCNFSM6AAAAABBJKYJD6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBVHAYTSNBTHA . You are receiving this because you are subscribed to this thread.Message ID: @.*** com>

[samliu0723]

That is a scrollbar, I changed the container CSS style overflow: scroll; to overflow: hidden; and it works but I am not sure whether it will lose the ability to scroll the content. Also, I didn't use @5 when creating the React app, and I am also not sure whether that caused the issue. And I also found that only happened on some browsers, I believe there is some way to style the scrollbar to be transparent.

[lemonteaau]

This className helped me to solve it.

[SonicWim]

For me, I needed to add the app class to the App component as stated above but also the overflow: hidden in the .list ul...