Hello Kaveri,
Add overflow-x: scroll ;
into your data-grid styles to enable a horizontal scrollbar.
Hi Kaveri,
you need to follow the below steps and apply the classes as per below HTML and CSS code.
<div class="scroll-container">
<div class="scrollbar-top">
<div class="scroll-inner"></div>
</div>
<div class="scrollbar-bottom">
<div class="scroll-inner">
<!-- Your scrollable content goes here -->
<div style="width: 2000px;">This is a wide content area that scrolls horizontally.</div>
</div>
</div>
</div>
After then just apply the css as below.
.scroll-container {
position: relative;
width: 100%;
}
.scrollbar-top,
.scrollbar-bottom {
overflow-x: auto;
overflow-y: hidden;
}
.scrollbar-top {
height: 16px; /* height of scrollbar */
direction: rtl; /* flip scrollbar to top */
}
.scrollbar-top .scroll-inner {
width: 2000px; /* match content width */
height: 1px; /* minimal height */
}
.scrollbar-bottom {
overflow-x: auto;
}
.scrollbar-bottom .scroll-inner {
width: 2000px;
}
/* Sync scroll positions */
.scrollbar-top::-webkit-scrollbar {
height: 16px;
}
Cheers!