My sidebar is making my page scrollable, instead of becoming itself scrollable.
Answered
Sun bear posted this in #help-forum
Sun bearOP
// components/sidebar/job-seeker-sidebar.tsx
return (
<div style={{ boxSizing: 'border-box', display: 'flex', flexDirection: 'column', height: '100%' }}>
<div style={{
height: '38px',
backgroundColor: 'var(--background)',
border: '0.1px solid var(--border)',
borderTopLeftRadius: '8px',
borderTopRightRadius: '8px',
padding: '2px 14px 0',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
}}>
<p style={{ fontWeight: '300', fontSize: '14px', color: '#646363' }}>
{t('myDashboard')}
</p>
</div>
<div style={{
backgroundColor: 'var(--foreground)',
border: '0.1px solid var(--border)',
borderBottomLeftRadius: '8px',
borderBottomRightRadius: '8px',
borderTop: 'none',
padding: '14px',
flexGrow: 1,
maxHeight: '100%',
overflow: 'auto',
}}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
</div>
</div>
</div>
);
};// src/app/[locale]/my-profile/page.tsx
return (
<div className="flex flex-col w-full h-screen">
<div className="flex flex-1 overflow-hidden" style={{ padding: '28px' }}>
<div style={{ marginRight: '28px', flexShrink: 0 }}>
<JobSeekerSidebar />
</div>
<div className="flex-grow flex overflow-auto">
<div style={{ marginRight: '28px', flexGrow: 1 }}>
</div>
<div style={{ width: '400px', flexShrink: 0 }}>
<UserProfileActions isLoading={isLoading} />
</div>
</div>
</div>
</div>
);
}Basically I need the sidebar to stretch until the vertical spacing around it is 48px, then if the items inside it take more vertical space than it size, or if the website window is resized and causes that, I need the content inside the sidebar to become scrollable instead, like in my second screenshot.
Answered by Sun bear
I finally managed to to solve it with the help of the AI, after many, many tries. I got lucky with randomly pasting one line of code from the suggestions it made (the whole code was doing something else, only that line was what I needed, and that seemed to get it to be as tall as the viewport, but the spacing was still outside the viewport, then I remembered that when I first solved this with the help of GPT (as I've said I did solved it quite a while ago, but somehow it got modified at some point) it told me that I had to also include the size of the top navigation bar in the calculation, and so I told that to the AI and that was the missing piece of the puzzle, from there it was just a matter of logging the values and modifying the calculation until the values printed where the values I wanted
I did not had to modify anything inside the sidebar component itself. This is the only line of code I had to update, which is the div which holds the sidebar component inside the Profile Page, and this did what I wanted to:
Anyway, I'd still like to thank you for trying to help me out with this one and hopefully we both learned something in the process 😁
I did not had to modify anything inside the sidebar component itself. This is the only line of code I had to update, which is the div which holds the sidebar component inside the Profile Page, and this did what I wanted to:
<div ref={sidebarRef} style={{ maxHeight: 'calc(100vh - 120px)', overflow: 'auto' }}>Anyway, I'd still like to thank you for trying to help me out with this one and hopefully we both learned something in the process 😁
110 Replies
Sun bearOP
Up
hmm, a recording video would help. I'm confused
Sun bearOP
Sure thing
@averydelusionalperson hmm, a recording video would help. I'm confused
Sun bearOP
Here is what I mean. And before you ask if I did it once why can't I do it again is because I did it with the help of AI (I am not a programmer) and that sign-up component I'm showcasing in the video is not supposed to take all the available space, so in a way it's a bit different but similar in terms of functionality.
I tried explaining to the AI how I need this dashboard / sidebar component to function like but it looks like for some reason it doesn't understand what I mean or just doesn't know how to do it.
I tried explaining to the AI how I need this dashboard / sidebar component to function like but it looks like for some reason it doesn't understand what I mean or just doesn't know how to do it.
Sun bearOP
My bad, I forgot you changed your name @averydelusionalperson, I thoguht it's a new person who didn't know I use AI 😁
yeah lmao, I was like... okay I knew you used AI, why is he saying again 
so.. basically if the spacing between the footer, and the sidebar should be defo 48.
and if it cannot be
reduce the sidebar height
and make it scrollable
Sun bearOP
Yes, but only make it scrollable if the number of items (buttons) inside it are longer than its height
yeah, I kinda think both are different problems, the scrolling and the spacing one
I'm no expert in css tho
Sun bearOP
I can show you how my sign-up component works like
The code is small but I don't understand it xd
return (
<div className="flex flex-col flex-grow w-full items-center justify-center py-7">
<div
ref={formContainerRef}
style={{
backgroundColor: "var(--foreground)",
border: "0.2px solid var(--border)",
borderRadius: "12px",
padding: "18px",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "flex-start",
maxWidth: "calc(360px + 48px)",
minHeight: "min-content",
maxHeight: "calc(100vh - 128px)",
overflowY: "auto",
}}
>could you share the ts/js too
looks like
they are using the formContainerRef to do something with it
Sun bearOP
Mind you, I did this one with the AI so I'm not sure why now it has issues understanding what I want, I even showed it this code
well... AI is weird
I mean the logic too
this is the html
Sun bearOP
Oh
@averydelusionalperson I'm no expert in css tho
Sun bearOP
Me neither, so no worries 😁
okay, I get how to do it ig
I mean, I get how it is being used in the sign up
gotta think how to do it in sidebar
well... without seeing it change
kinda hard lmao
Sun bearOP
All you have to do is to just create a rectangle on your side with like a few items
On an empty page
And try to add items into it until it grows large enough to make the page scrollable
Then try to figure out how to instead make it become scrollable when that happens
So that it doesn't make the page scrollable and it keeps a fixed spacing from the bottom of the page
Like 24px or 48px
😁
Also, now the height of the sidebar is smaller than the height of the other component for some reason xD
(after updating the code like you said)
so, the spacing is not working or not scrolll? or both
Sun bearOP
That's correct, no scrolling, instead of becoming scrollable it grows and makes the page itself scrollable
What's a bit frustrating about this is that at some point in the development, as in many months ago I'm almost sure I had it working like I'm describing 😁
this overflow shit is confusing as f*ck
@averydelusionalperson try adding `overflow-hidden` to the top most div in the my-profile/page.tsx. like `flex flex-col w-full h-screen overflow-hidden`
Sun bearOP
Now it took the whole width of the page almost lol
And it still makes the page scrollable
this is my sidebar, took some time to convince my page to not scroll itself, instead scroll the sidebar
@Sun bear Now it took the whole width of the page almost lol
try
overflow-y-hiddenSuperstar
@averydelusionalperson try `overflow-y-hidden`
Sun bearOP
That's how it looks now
same issues as before
@Sun bear Click to see attachment
sidebar is taking full width?
Sun bearOP
Not exactly full width, it does keep some spacing from the margin
But it overlaps the other component
yeah, can you share it's styles?
the sidebar's
@averydelusionalperson the sidebar's
Sun bearOP
return (
<div style={{ boxSizing: 'border-box', display: 'flex', flexDirection: 'column', height: '100%' }}>
<div style={{
height: '38px',
backgroundColor: 'var(--background)',
border: '0.1px solid var(--border)',
borderTopLeftRadius: '8px',
borderTopRightRadius: '8px',
padding: '2px 14px 0',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
}}>
<p style={{ fontWeight: '300', fontSize: '14px', color: '#646363' }}>
{t('myDashboard')}
</p>
</div>
<div style={{
backgroundColor: 'var(--foreground)',
border: '0.1px solid var(--border)',
borderBottomLeftRadius: '8px',
borderBottomRightRadius: '8px',
borderTop: 'none',
padding: '14px',
flexGrow: 1,
maxHeight: '100%',
overflow: 'auto',
}}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>I switched it back to how it was cause now it's leveled with the other component at least
In terms of height
@averydelusionalperson okay, the div with the `overflow: auto`. make it `overflowY:auto`
Sun bearOP
Like this ?
Ohhh
nah,
style={{overflowY:'auto'}}^ like this
Sun bearOP
wait which div exactly ?
The one at the very bottom ?
that div
Sun bearOP
This one ?
Sun bearOP
Nothing changed 😄
fcking hate css sooo much
kinda hard to do it really, without seeing the output regularly
I mostly use dev tools
to mess with the css
and then implement the code in the editor
after I understood what to do
Sun bearOP
I can give you the entire code for my profile page and sidebar
Would that help ?
ahh, prolly not
Sun bearOP
Ohh actually you'd have error cause I'm using localization
You'd have to remove quite a bit of stuff
if your site is public
I might mess with it in devtools later
they've currently blocked your site
in office
Sun bearOP
Wait what ?
Why would they block it
they are weird, blocking random sites
I will try to mess with css in devtools once I go home
@averydelusionalperson I will try to mess with css in devtools once I go home
Sun bearOP
Awesome, when you're home just let me know and I'll give you access to the repo instead if you want to have a look, because I don't have that jobs page publicly available yet on my website.
I may solve it in the meantime (I'm trying to do it with the AI) 😁
If I do I'll let you know how I did it
it's a simple solution
just some few lines
but yeah...
it is simple and complicated at same time
@averydelusionalperson Sure, I'll try.
Sun bearOP
Awesome! thank you very much 🙏🏻
@averydelusionalperson it is simple and complicated at same time
Sun bearOP
I finally managed to to solve it with the help of the AI, after many, many tries. I got lucky with randomly pasting one line of code from the suggestions it made (the whole code was doing something else, only that line was what I needed, and that seemed to get it to be as tall as the viewport, but the spacing was still outside the viewport, then I remembered that when I first solved this with the help of GPT (as I've said I did solved it quite a while ago, but somehow it got modified at some point) it told me that I had to also include the size of the top navigation bar in the calculation, and so I told that to the AI and that was the missing piece of the puzzle, from there it was just a matter of logging the values and modifying the calculation until the values printed where the values I wanted
I did not had to modify anything inside the sidebar component itself. This is the only line of code I had to update, which is the div which holds the sidebar component inside the Profile Page, and this did what I wanted to:
Anyway, I'd still like to thank you for trying to help me out with this one and hopefully we both learned something in the process 😁
I did not had to modify anything inside the sidebar component itself. This is the only line of code I had to update, which is the div which holds the sidebar component inside the Profile Page, and this did what I wanted to:
<div ref={sidebarRef} style={{ maxHeight: 'calc(100vh - 120px)', overflow: 'auto' }}>Anyway, I'd still like to thank you for trying to help me out with this one and hopefully we both learned something in the process 😁
Answer
@Sun bear I finally managed to to solve it with the help of the AI, after many, many tries. I got lucky with randomly pasting one line of code from the suggestions it made (the whole code was doing something else, only that line was what I needed, and that seemed to get it to be as tall as the viewport, but the spacing was still outside the viewport, then I remembered that when I first solved this with the help of GPT (as I've said I did solved it quite a while ago, but somehow it got modified at some point) it told me that I had to also include the size of the top navigation bar in the calculation, and so I told that to the AI and that was the missing piece of the puzzle, from there it was just a matter of logging the values and modifying the calculation until the values printed where the values I wanted
I did not had to modify anything inside the sidebar component itself. This is the only line of code I had to update, which is the div which holds the sidebar component inside the Profile Page, and this did what I wanted to:
js
<div ref={sidebarRef} style={{ maxHeight: 'calc(100vh - 120px)', overflow: 'auto' }}>
Anyway, I'd still like to thank you for trying to help me out with this one and hopefully we both learned something in the process 😁
dam man, you never give up.... like without even knowing how to do it, you still did it with the help of AI, and making AI help you is hard af. 🫡