Offcanvas helper does not allow scrolling - [SOLVED]

Hi @PeteSharp

I would like to ask for your help. There must be some setting, but I can’t figure out where and what. I’ve already looked through the class settings, I’ve set the height, but even then it won’t let me scroll any further.
Can you help me with that?

Hi @Boss81

Sorry, I can not replicate that, it scrolls for me, I am assuming all those heading are inside an Offcanvas Bloc.?

Can you send me the project please.

Pete

Of course. Only a part of it is allowed to scroll.

I wonder what I didn’t do right or what could be wrong.

offcanvas-test.bloc (31.8 KB)

Thanks,

That is scrolling for me. Can you explain how you are testing this.

The same way. But that was the problem, it didn’t go all the way down, there wasn’t any space, but I gave it a margin, and that’s how it was solved, so it’s working now.

Oh right, you suggested it wasn’t scrolling.

Yeah you need to design the styling yourself. It is just like any other web element.

You can add bottom padding to the class .offcanvas-content

1 Like

How can I make the scroll bars always visible?

Try:

html::-webkit-scrollbar {
    width: 12px; 
}
html::-webkit-scrollbar-thumb {
    background: yellow;
}

Sorry Jerry,
I mean only in the offcanvas content scrollbar

Ok, in that case try adding below to the offcanvas:

.my-class {
  overflow-y: scroll;
}

in the code editor?

Yes. The class manager unfortunately does not have overflow-y as a setting.

This way?

my-class

Yes, thats the correct way. Now make sure you apply the class to your offcanvas.

I did. Doesn’t work.
Hmm …
The scrollbar is visible only when you scroll.
I want it visible all the time so that the customer knows there’s more content.

I’ll have a look later for you when back home.

1 Like

Enjoy your palm tree :tropical_drink:

Good Guess :grinning:. It’s a Public Holiday today and 32 degrees so the perfect day for a :man_swimming: and a :beer:.

1 Like

Also here in Berlin.
International Women’s Day.
Sunshine, not a cloud in the sky, 10°C.

Hey @Bootsie,

Here’s a different approach and uses webkit engine to render correctly. To keep it simple, I’ve applied it directly to the .offcanvas-body class I think the fancy styling possibilities speak for themselves.

.offcanvas-body {
  	overflow-y: scroll;
	overflow-x: hidden;
 }
.offcanvas-body::-webkit-scrollbar {
  	width: 10px;
}
.offcanvas-body::-webkit-scrollbar-thumb {
  	background-color: yellow;
  	border-radius: 6px;
}
.offcanvas-body::-webkit-scrollbar-track {
  background-color: red;
}

As Firefox is using Gecko instead of Webkit the above probably will not work (on Firefox). Something like the one below should do the trick for Firefox. I’ve not tested it though. Just add it to the first class:

scrollbar-width: 10px;
scrollbar-color: red yellow;

Small Potato Ltd - 000045