How do I make my components height consistent throughout all pages?
I am currently working on a gym tracking/analytics system to practice working with next.js and tailwind. On the main page of my dashboard, the height is just the way I'd like it to be, the sidebar extends throughout the page and the content too. However, when you get to the second page (dashboard/activity):
1- The sidebar is not taking the full height similar to the main page
2- The table is also not taking full height regardless of me setting the grid rows to 1/-1
If anyone could explain why this behavior is happening and help me understand I'd greatly appreciate it, thank you 🙂
My goal is design consistency
https://gymlie.vercel.app/dashboard
https://gymlie.vercel.app/dashboard/activity
Gym Dashboard
Generated by create next app
Gym Dashboard
Generated by create next app
17 Replies
try
h-full on main and change row-span-full to row-span-12 on the right part (activity) just like you have it on sidebar 🙂
or try row-span-full on boththank you, that did work, but it creates another problem
i had things set to 100% before but i changed it because it would break on larger screen sizes, i'll try and look for that thread
https://discordapp.com/channels/436251713830125568/1251481703021805628
if im making wrong layout/design choices, do let me know because i'm trying to learn 🙂
I would just stick with row-span-full on both w/o h-full on main
it was like that before, but it resulted in a weird bug and instead of trying to fix it i just set the span to 12 😬
this is with span 12
this is with span full
its putting the sidebar in one row when i do that
ahh i see you would probably need to wrap all that is not sidebar in a div and do seperate grid for it 🙂
could you help me understand what's happening and why? whenever you have the time of course 🙏 i'm just trying to understand how css and grid work
it only spans the sidebar in first row but i assumed it would span across all of the rows when you set grid-row to 1/ -1 but i guess not. So to fix that behavior we need to wrap all the content that we want to be beside sidebar in a div and then give that div display of grid
oh okay ill try this fix tomorrow at work and see how it goes 🙂
thank you so much for the help brah
wrapped everything on the right with this and it worked out great, thank you @Mannix
i still don't understand why this behavior happened, could you explain it to me or just link me to an article/video so i can gain some understanding? thanks
I'm not 100% confident but I think when browser creates a grid it sees that you have specified to have 12 columns but rows are not specified so it puts the sidebar in first row and then goes element by element and creates more rows if needed. Basically it doesn't check how many elements there is before making rows, it just creates them as needed.
don't know if i explained it properly kinda hard do explain 😛
ohhhhhhh okay
i see
in that case do you think if i specified that i'd like to have 12 rows for example, and that i want both the sidebar and the content of the sidebar to start from the first row
that would be a fix?
possibly yeah
thanks for taking the time @Mannix
:thumbup: no problem