ScrollPanel pushes content to the left in order to show scrollbar

[mwe-code]

Hi @cagataycivici,

I would like to add this example where the scrollbar of the scrollpanel pushes it's content to the left.

Is it possible to always show that scrollbar at the scrollpanel? So it's content is not pushed to the left while overflowing.

Code:

<template>
	<div class="p-grid nested-grid">
		<div class="p-col-6 p-pl-4 p-pr-2 p-py-2">
			<ScrollPanel class="p-col-12" style="width: 100%; height: 90vh;">
				<Panel header="Header 1" :toggleable="true" class="p-mb-2 color-background">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
					cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</Panel>
				<Panel header="Header 2" :toggleable="true" class="p-mb-2">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
					cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</Panel>
				<Panel header="Header 3" :toggleable="true" class="p-mb-2">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
					cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</Panel>
				<Panel header="Header 4" :toggleable="true" class="p-mb-2">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
					cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</Panel>
				<Panel header="Header 5" :toggleable="true" class="p-mb-2">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
					cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</Panel>
				<Panel header="Header 6" :toggleable="true">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
					cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</Panel>
			</ScrollPanel>

		</div>
		<div class="p-col-6 p-pl-2 p-pr-4 p-py-2">
			<Card class="p-shadow-2">
				<template #title>
					SOME CARD TITLE
				</template>
				<template #content>
					<h3>TO BE IMPLEMENTED</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
						Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
						Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
						cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</template>
			</Card>
		</div>
	</div>
</template>

<script lang="ts">
</script>
<style lang="scss">

.p-panel-content {
	background-color: green!important;
}

</style>

[mertsincan]

Hi,

Please try;

.p-scrollpanel .p-scrollpanel-content {
    overflow: scroll;
}

Best Regards,

[mertsincan]

I decided to add the above solution to core.