How to custom style scrollbars in mendix

0
I for the life of me cannot find a solution that allows me to customize myu scorllbars through scss.   Ive placed classes inside my .body{}, I've copied from solutions online, of which none worked.   Am I missing something? Using the inspector I can find that mx-scrollcontainer and its (too many) classes are always there, but nowhere in any styling module have I been able to find these classes so I dont know how to target it.   I'm getting pretty frustrated here as these ugly scrollbars really ruin any other styling applied to the page. ideas?   For further info, im trying to adjust ALL scrollbars in my application, it would be a great bonus if the solution wasn't adding a custom container with scrolling everywhere I need it.
asked
1 answers
2

It sounds like you're having a frustrating time trying to customize your scrollbars using SCSS. It can definitely be tricky when solutions you find online don't seem to work as expected. Based on what you've described, it seems like you've taken the right steps by placing classes inside your .body{} and trying different solutions.

The fact that you're seeing the mx-scrollcontainer and its numerous classes in the inspector, but are unable to find these classes in any styling module, is indeed puzzling. It's possible that the styling is being applied dynamically or that there's some library or framework at play here that's affecting the behavior.

Given your efforts, it's clear you're dedicated to finding a solution that won't involve adding custom containers with scrolling everywhere. While I don't have the exact solution, I can offer a few suggestions:

Double-check Libraries/Frameworks: Ensure that you're not working with any third-party libraries or frameworks that might be applying their own styles to the scrollbars. Sometimes these can override custom styles.

Specificity in CSS: If you're trying to target specific elements but it's not working, remember that CSS specificity matters. Make sure that your styles are specific enough to override any default or existing styles.

!important Rule: While it's generally not recommended to use the !important rule, in cases like this, it might help to force your styles to take precedence over others. For example, your-selector { property: value !important; }.

Chrome DevTools: Since you're using the inspector, try using Chrome's DevTools to inspect the styles being applied. This might give you a better understanding of where the styles are coming from and how to target them.

Browser Compatibility: Keep in mind that customizing scrollbars is not universally supported across all browsers. Make sure you're testing your solution in different browsers to see if the behavior differs.

Experiment with Pseudo-elements: You might want to experiment with pseudo-elements like ::-webkit-scrollbar for WebKit browsers or ::-webkit-scrollbar-thumb to target scrollbar elements directly.

answered