I can't make horizontal scrollbars invisible

Need help
1

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 :slight_smile: ) 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:

image

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…

2

Assuming that there are no problems with conventional Bubble layout settings in your elements … try this code:

<style>
#scrollmenu {
    overflow-x: scroll; /* Enables horizontal scrolling */
    overflow-y: hidden; /* Prevents vertical scrollbar */
    flex-wrap: nowrap !important;
}

#scrollmenu::-webkit-scrollbar {
    display: none; /* Hides scrollbar in Chrome/Safari */
}

#scrollmenu {
    -ms-overflow-style: none; /* Hides scrollbar in Internet Explorer 10+ */
    scrollbar-width: none; /* Hides scrollbar in Firefox */
}
</style>
1 Like
3

Yes! Thank you so much, this is it! Though I am not sure what exactly worked this worked perfect finally! I wish good to you! :slight_smile:

:confetti_ball: ! thank you so much

1 Like