Sidebar content overflows its container

[glebgolov-ziosem]

"primevue": "^3.3.5",
"primeflex": "^2.0.0",
"vue": "^3.0.0"

As per title, I've seen that the content of the sidebar overflows without any scrollbar showing up. I don't know if it's wanted as it is now in PrimeVue, I've seen the new Offcanvas component of Bootstrap 5 behaving in a different way. Down below I share a little styling to resolve the issue.

A few images explain more than 1000 words (I hope)

Simple sidebar

Simple sidebar content

A bit more complex example (with TabView and TabPanel(s))

My solution for the TabView case (third image)

For the TabPanel that contains a lot of content I've written:

<TabPanel>
    <template #header>
        <i class="pi pi-fw pi-user"></i>
        <span>Informazioni</span>
    </template>
    <div class="p-inputtext-sm p-mt-3 p-px-2" style="height: calc(100vh - 200px); overflow-y: auto">
        <div class="p-fluid p-formgrid p-grid">
            ...
        </div>
        <Divider class="p-mt-0" />
        <div class="p-fluid p-formgrid p-grid">
            ...
        </div>
        <Divider class="p-mt-0" />
        <div class="p-fluid p-formgrid p-grid">
            ...
        </div>
    </div>
</TabPanel>

where style="height: calc(100vh - 200px); overflow-y: auto" is added to make it work and the class p-px-2 (primeflex needed) to compensate the width taken by the scroll bar. In this case 200px in the height calculation are ok but it is possible to change to your liking.

If you want to use the ScrollPanel component instead, it is possible to replace the uppermost div in the TabPanel with a little more concise <ScrollPanel class="p-inputtext-sm p-mt-3" style="height: calc(100vh - 200px)">

[tugcekucukoglu]

Thanks for your report. It is fixed.