How to make scroll bar thicker in vbcs table or gird

Based on the default redwood theme the table and grid scoll bar are very thin

User can update it by adding the following code in app.css in vbcs application.

#employeetable::-webkit-scrollbar-track {
  border-radius: 15px;
  background-color: #e9e9e9;
  border-radius: 15px;
}

#employeetable ::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  background-color: #e9e9e9;
  border-radius: 15px;
}
#employeetable ::-webkit-scrollbar-thumb {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: #7b7d7f;
}

width will increase the thickness of vertical scroll bar

height will increase the thickness of horizontal scroll bar.

Screenshot without additional css

Screenshot with additional css

Live application example ( hover on the application to view scroll bar ) :

Link to view application in new tab – https://khalil232.com/apps/ojet-apps/?ojr=thick-scrollbar

VBCS-Tutorials
Tags , , ,

About the Author

khalil

Hi, I'm Khalil, a passionate front-end developer with over 8 years of experience in web development. I specialize in building interactive, user-friendly websites using technologies like JavaScript, HTML, CSS, and Java.

I've had the opportunity to work on a variety of projects across different industries, helping businesses create modern and responsive web applications.

Outside of coding, I enjoy exploring the latest trends in design and tech, as well as sharing knowledge with others. I'm always looking for new challenges to grow my skills and make a positive impact in the tech community

You may also like these