Issue with "Sidebar Layout - Narrow Sidebar with Titles"

[marcosgeorgopoulos]

Hi,

I've purchased prime blocks and I'm trying to use one of the sidebar layout examples and dynamically update the content in the main 'dashed' component area. That all works fine and the relavent section of code looks like

<div className="p-5 flex flex-column flex-auto">
               <div className="border-2 border-dashed surface-border border-round surface-section flex-auto">
                  <main>{childpage}</main> 
               </div>    
</div>

However what is happening now is the main content area is going down past the height of the sidebar.

What I'm wanting to accomplish is to have the content to not resize greater then the original size and have a vertical scrolling bar if the content is too large.

Here it is without content.

I appreciate this is probably a very basic question, but I'm new to prime react, prime flex etc and was hoping for some assistance.

cheers.

[melloware]

Can you put together a StackBlitz showingthe issue: https://stackblitz.com/edit/react-ozgtgi?file=src%2FApp.js

[marcosgeorgopoulos]

Thank you I've managed to simulate the issue here https://stackblitz.com/edit/react-ozgtgi-bysxev?file=src%2FApp.jsx

I use 'open in new tab'. I've duplicated a bunch of edit boxes etc to make the issue more obvious. I seem to be missing some styling on the form components in this example, but I don't think that is relevant.

It's rendering the layout component ( component->Layout.jsx ) which then renders pages->Profile.jsx

I'm trying to get the main page content to not extend past the menu at the bottom.

I've tried using overflow-auto and overflow-scroll in

and in Profile.jsx but its not working.

I am new to both React and this library so I suspect its something simple I'm missing.

thank you.

[SelenKockar]

Hello,
After flex-auto you can give maximum height with max-h-... as you like after that you can add overflow-y-auto class for scroll bar.

           <div className="border-2 border-dashed surface-border border-round surface-section flex-auto">
              <main>{childpage}</main> 
           </div>

[marcosgeorgopoulos]

Thank you, I did try that but could not get it working. I have uploaded an example of what I'm seeing to the link in the other reply.

cheers.

[nitrogenous]

We are truly sorry about the delayed answer. I simply achieved the thing you were mentioning by just deleting the 'h-screen' class. I hope this will help.