How to hide scrollbars in extensions?

Extensions
1

I already tried using the CSS, overflow: hidden property but it didn’t work.
The scrollbars appear when the height or width exceed 280px and 300px respectively.

Need help regarding this.

2

You probably need to add some positioning or a reset set of rules or something else to get the CSS to achieve what you want.

In this example you added overflow: hidden to the wrong element.

There are a number of solutions to this but it’s just a CSS issue with getting content into a fixed size div. There is no one answer. And theres not enough information to make a suggestion

Personally I tend to apply a reset.css then add a div to body and on that div apply the CSS Rules I need/want for the intended outcome.

Something along the lines of

#id_of_the_div {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}
4

I tried this and it didn’t work.
The issue is not just addition of scrollbars, if I want to make my extension smaller in height than 380px, it still is taking up that much space and white space is added in between the extension and the extension name.

5

I can’t debug what I can’t see.

Somewhere you have a CSS problem. But I don’t know what you are doing to see what a fix could be.

6

Thanks for your Help @BarryCarlyon. I missed out on Panel Height inside of Asset Hosting in the extensions manager console. From there we can define the height of the extension between 100-500px. 300px is the default value.

1 Like
7

Good to here.

You’ll still need to do CSS for scroll bars if your content is taller than 500px!