Grid scrollbars missing arrows

[killian35Participant]

Hello,

On the scrollbars for the grid the right-arrow for horizontal scrollbar and down-arrow for vertical scrollbar are missing. Checking the classes assigned to the down-arrow <div></div> element of the vertical scrollbar I noticed two classes are missing a space between them: class='jqx-reset jqx-icon-arrow-downjqx-scroll-btn-inner'. There is also a missing space for the right-arrow of the horizontal scrollbar. These missing spaces are causing the arrows to disappear. Once I manually put a space to separate the classes, the arrows appeared. I’m unsure what circumstance would cause the two classes to be merged.

Any help would be appreciated.

Thank you,
Kelly

[adminKeymaster]

Hi Kelly,

This behavior is by design and depends on the theme used for the components. In more modern UIs, scrollbars are without arrows.

Regards,
Peter

[killian35Participant]

Hello,

That would make sense if all arrows were missing. However, it’s only the right and down arrows missing. The issue is demonstrated in your online grid demo. Looking at the spreadsheet demo you can see that the right and down arrows do not match the theme of the up and left arrows. This is caused by the missing leading space.

Looking through the source code in jqxscrollbar.js I see in the “ADD CSP classes” area on line 952 there is this line btnDownInner.className += "jqx-scroll-btn-inner";. The jqx-scroll-btn-inner class is being appended to the className property with no leading space. I believe this should have a leading space since it is being appended and not replacing any existing value. All other classes being appended in the same “ADD CSP classes” area contain a leading space. I made the change in my copy and the arrows work intended.

Thank you,
Kelly

[Author]

Posts