Add horizontal Scroll Bard at top on Data grid 2

0
I want to add a horizontal scroll bar in the data grid 2  at the top I tried using HtMl snippet for that and another JavaScript snippet to sync the scroll bar but it did not work  
asked
2 answers
4

Hello Kaveri,

Add overflow-x: scroll ; into your data-grid styles to enable a horizontal scrollbar.

answered
0

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!

answered