Video - Component scroll bar

Extensions
1

I’m making a Video - Component extension type, and I’m wondering if it’s possible to use CSS’s overflow:scroll; or similar to add a scroll bar for the rare occasions when content is too long to display in the extension’s box. This is what it looks like when I add overflow:scroll; to a <div> which contains all of my content. I cannot scroll down. This is what it looks like in the Developer Rig:

2022-01-07_14-37-30
2022-01-07_14-37-30883×511 41.4 KB

I’ve also tried adding overflow:scroll; to <body>, but no scroll bar appears when I do this. Thank you.

2

Skip the rig and test on the website for a more “realistic” experience to confirm/check yoru CSS In the rig matches the CSS in the rig to be sure.

I tend to set my HTML/Body to the

body {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: scrol;
}

But to be sure I’d have to whip open the rig and test.

So your problem is likely a CSS issue than a rig issue but test rig/website to be sure

3

Thanks for the suggestion. I just tried that CSS (with the “scrol” typo fixed), in both the rig and on hosted test, and the scroll bar doesn’t appear. See this screenshot of hosted test:

2022-01-07_19-32-20
2022-01-07_19-32-201454×771 88.1 KB

4

I also observed that this informational text you have to confirm before viewing the extension proper, has a nice scrollbar. Is the extension itself supposed to have this same scrollbar too perhaps?

2022-01-07_19-39-32

5

image
image1712×1108 365 KB

settings

image
image1624×247 25.6 KB

Code

And

is on GH Pages at https://barrycarlyon.github.io/twitch_extension_debug/

so, you can plumb thse values into your own extension as the code is “clientID/secret less/no ebs”

image
image1638×765 77.7 KB

In summary, (so in my original reply I was just missing the nested div, which is where the magic happens), since I always have a content div and do ally my work to that div rather than the body

<html>
<head>
</head>
<body>
<div id="content"></div>
</body>
</html>

html, body, #content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#content {
    overflow: scroll;
}
1 Like
6

Thank you very much! It works for me. :slight_smile: I also had to add margin:0 to body, so that the scroll bar becomes flush with the side of the panel instead of having a gap, and I added another nested div content2 which has a margin of 8px so my actual text content isn’t flush against the side. Also, for anyone interested, i ended up setting overflow-y:auto instead of overflow-y:scroll so that the scroll bar only appears when necessary.

7

I think my usage of a reset.css (also in the repo) takes care of that for me. So I didn’t think to mention it.