How to set scrollbar width explicitly

How to set scrollbar width explicitly

Posted by: ppaska on 3 February 2018, 10:27 pm EST

• 

  ppaska

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 February 2018, 10:27 pm EST

  Hi there,

  I am using FlexGrid and TreeView with AngularJS.

  In some environments with high resolution monitors FlexGrid and TreeView scrollbars look too big and ugly. On other monitors, it looks good (as expected)

  Can you please advise either I can explicitly set scrollbar width? Then it should look nice in all environments.

  Where is scrollbar width defined?

  Regards,
  
  Pavlo

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 February 2018, 8:02 pm EST

  Hi Pavlo,
  
  The scollbars in All wijmo controls are standard/system scrollbars. They may be styled in CSS but this support is not constant among browsers. Webkit browsers (including Chrome and Firefox) allow you to change colors and sizes. IE/Edge only support customizing the colors.

  Please refer to the attached sample for the same.

  ~Manish

  FlexGrid_slim_scroll_revised.zip

• 

  ppaska

  • Post Options:
  • Link
    Copy

  Posted 4 February 2018, 9:17 pm EST

  Hi Manish, Thanks for your example, what shows how to override multiple scrollbar styles including width.

  Can I change only width (for vertical scrollbar) and height (for horizontal) and no other style changes to the scrollbar?

  How can I make the same look and feel as just scrollbar width smaller?

  Regards,
  
  Pavlo

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 February 2018, 10:42 pm EST

  Hi Pavlo,
  
  You may set scrollbar width/height in the same way. You need to only set width/height only in this case.

  ~Manish

• 

  ppaska

  • Post Options:
  • Link
    Copy

  Posted 5 February 2018, 12:10 am EST

  That’s what I’ve done, but it either doesn’t show scrollbar at all or some other parts are missing. See sample attachedFlexGrid_slim_scroll_revised.zip

• 

  ppaska

  • Post Options:
  • Link
    Copy

  Posted 5 February 2018, 1:22 am EST

  Also, what about WJTreeView. Same approach seems doesn’t apply to Wijmo TreeView control.

  Thanks,
  
  Pavlo

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 February 2018, 5:29 pm EST

  Hi Pavlo,
  
  We are sorry for the inconvenienced.
  
  Could you please share device information on which you are getting larger scrollbar than usual.

  ~Manish

• 

  ppaska

  • Post Options:
  • Link
    Copy

  Posted 5 February 2018, 10:08 pm EST

  Hi Manish,

  Thanks for looking at my issue, please have a look at attached pictures. This is probably due to scaling on my Windows 2010 laptop, but still, I want to “hardcode” scrollbar width/height that it looks nicely everywhere.
  
  The approach you’ve suggested earlier was very close to complete with FlexGrid, but it didn’t work for TreeView at all.

  Will appreciate if you can provide sample, with hardcoded scrollbar width for FlexGrid and TreeView.

  Thanks,
  
  Pavlo

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 6 February 2018, 2:22 pm EST

  Hi Pavlo,
  
  We are sorry, we try find out how to reduce Scrollbar size but only one solution is find to use custom scrollbar. You may get scrollBar width using some calculation but not set.

  Please find the attached sample that shows scrollbar for both FlexGrid and TreeView.

  ~Manish

  FlexGrid_TreeView_slim_scroll_revised.zip

• 

  ppaska

  • Post Options:
  • Link
    Copy

  Posted 6 February 2018, 8:47 pm EST

  thanks Manish

• 

  gkukko

  • Post Options:
  • Link
    Copy

  Posted 5 September 2018, 4:46 pm EST

  Hi Manish,

  The above discussion was helpful, but the above example only customize the width of the vertical scrollbar, whereas the the width of horizontal scrollbar remains unchanged. Is there anything else needs to be done?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 6 September 2018, 3:42 pm EST

  Hi,

  For horizontal scrollbars, you need to set the height property to required value.
  
  Please refer to the following code snippet:
  
  div::-webkit-scrollbar{
  
  height: 5px;
  
  width: 5px;
  
  }
  
  You may also refer to the attached updated sample.

  ~SharadFlexGrid_TreeView_slim_scroll_revised.zip