Would someone please for the love of god help me remove these awful horizontal scroll bars? I’ve been trying for a few days to remove it but I just can’t get it to work even though I’ve kept coming back to it… I’ve tried CSS and settings but still nothing. I don’t know how to code perfectly but I try to get by when I can.
I use this code below to enable horizontal scrolling on groups/repeating groups since that was an issue, so I got it to wok (yay ) but these awful scrollbars!!! They’re ruining the nice look to many areas in the app… to say the least.
The scroll bars aren’t ending the world… but they do look awful, especially when mobile. I don’t know how to disable it, I guess code is the only way right? This is how they look across the groups it’s applied to:
If you care, kindly see CSS code to enable horizontal scroll + my attempt at making it invisible:
<style>
#scrollmenu {
overflow-x: scroll !important;
scrollbar-width: none !important;
flex-wrap: nowrap !important;
overflow-y: hidden !important;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.scrollmenu::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
<!--
.scrollClass {
overflow-x: scroll !important;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.scrollClass::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.element::-webkit-scrollbar {
-webkit-appearance: none;
}
-->
.element::-webkit-scrollbar {
-webkit-appearance: none;
overflow-y: hidden !important;
}
#textmenu{
white-space: nowrap !important;
overflow-y: hidden !important;
}
<style> ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar { width: 0px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #D62929; } overflow-y: hidden !important; </style>
</style>
<script>
// good to go! Put your code here.
const element = document.querySelector("#scrollmenu");
element.addEventListener('wheel', (event) => {
event.preventDefault();
element.scrollBy({
left: event.deltaY < 0 ? -30 : 30,
});
});
</script>
I’m not too sure what to try…