Next.js Discord

Discord Forum

Tailwind pages move and not aligned equally.

Answered
jaycoda posted this in #help-forum
Open in Discord
Avatar
jaycodaOP
my test app is live on vercel and when you click between the 'home' and 'user' route, you will notice a nudge/swift movement left to right of the main centre div. I am completely lost as to why. Here is link and screen shot of 1. layout file code, 2. home code and 3. user code, I have used tailwind. https://server-actions-sandipan.vercel.app/user click the link to see yourself, Please help?
Image
Answered by joulev
it's because in /user there is a vertical scroll bar in the page and in /home there isn't.

when /home is filled with data it should have a scrollbar too, then the shift no longer happens.
View full answer

5 Replies

Avatar
joulev
it's because in /user there is a vertical scroll bar in the page and in /home there isn't.

when /home is filled with data it should have a scrollbar too, then the shift no longer happens.
Answer
Avatar
jaycodaOP
ahhh great stuff, I didn't think of that, thank you👍 I will try to figure out what to do about that
Avatar
Thrianta
If you want to get rid of the scrollbars easily with tailwind run this package
npm i tailwind-scrollbar-hide
and then just use scrollbar-hide in your class
personal opinion its time to phase out scrollbars on most stuff and should only remain when its not obvious that there is more content below, most ppl use phones and most phone apps and pages dont have scrollbars, ppl know to scroll down now, its all they do when they are not swiping left ;p
Avatar
jaycodaOP
brilliant I will give that a try also, this is just a learning excerise to broadend my knowledge of what to do in this scenerio when on desktop. Thanks for your valuable feedback :galactic_brain: