CSS display: scroll seems to break data-augmented-ui divs

[nathanoday]

Hi All, I'm creating a website for a university class and excited to use the autmented-ui pack; really incredible work you've created. I'm trying to use a data-augmented-ui div to create a Star Wars-esque datapad frame around my main content area. However, I'm having trouble with overflow content not being scrollable.

HTML Snippet

<div data-augmented-ui="tl-clip-x t-clip tr-clip-x r-clip br-clip-x b-clip bl-clip-x l-clip both" class="datapadFrame">
<div class="mainArea">
... site content ...
</div>
</div>

CSS Snippet

.datapadFrame{ z-index: -10; height: 80vh; overflow-y:scroll; }

.mainArea { padding: 25px; z-index: 300; }

Screenshot

As you can see from my screenshot and associated HTML + CSS snippets, the main content area is nested inside of the .datapadFrame div, but with overflow: scroll set, the shape mask on the border is broken via offset (I think because of the presence of the scrollbar appearing), and, the scrolling doesn't actually work. There's a lot more content in the .mainArea div that should be displaying but can't because the .datapadFrame div isn't scrollable. Am I missing something simple here? Would it be better to make the datapadFrame a fixed position background layer and not try to contain the mainArea div inside it?

Thanks for taking a look!

[nathanoday]

As an additional clarification, I currently have the .datapadFrame div set to a height of 80vh to more easily demonstrate the overflow problem, but I intend for it to be a full height area when the overflow starts working.

[JaneOri]

Hey! So sorry I just saw this for the first time.

First, thank you very much for checking out augmented-ui, what you're doing with it looks awesome, I love seeing it

You normally wouldn't want the augmented element itself to scroll like that.. it would definitely cause some offset issues with the paths (as observed). It also clips the area where the scrollbar is which may be problematic.

The reason you can't use the scrollbar at all though is because you put z-index: -10; on the scrolling container.

My suggestion is to put the scroll on the mainArea and position it to take up the full space inside the wrapper, minus some padding so the augmentations don't interfere with the scrollbar UI, etc.

Here is a working example of my suggestion:

https://codepen.io/propjockey/pen/ZEZQrpJ/a9feb24c3cce27e3681ba740ac60b0f2?editors=1100

Also, to avoid problems deeper in your dom, don't forget to add data-augmented-ui-reset to your mainArea container so anything augmented inside of it will work properly across older (but not so old that you can ignore it) browsers.

Thank you!
// Jane

[nathanoday]

Wow, thanks so much for taking the time to read my question, look at my code, and offer a working suggestion. That is super helpful! Great advice to make scrolling work as well as the reminder to use the reset layer. I appreciate it!

…

On Fri, Mar 8, 2024, 08:47 Jane Ori ***@***.***> wrote: Hey! So sorry I just saw this for the first time. First, thank you very much for checking out augmented-ui, what you're doing with it looks awesome, I love seeing it You normally wouldn't want the augmented element itself to scroll like that.. it would definitely cause some offset issues with the paths (as observed). It also clips the area where the scrollbar is which may be problematic. The reason you can't use the scrollbar at all though is because you put z-index: -10; on the scrolling container. My suggestion is to put the scroll on the mainArea and position it to take up the full space inside the wrapper, minus some padding so the augmentations don't interfere with the scrollbar UI, etc. Here is a working example of my suggestion: https://codepen.io/propjockey/pen/ZEZQrpJ/a9feb24c3cce27e3681ba740ac60b0f2?editors=1100 Also, to avoid problems deeper in your dom, don't forget to add data-augmented-ui-reset to your mainArea container so anything augmented inside of it will work properly across older (but not so old that you can ignore it) browsers. Thank you! // Jane — Reply to this email directly, view it on GitHub <#18 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJAWCXPGVQ77PUJJSSPZA7DYXHFQ7AVCNFSM6AAAAABCTWGOLOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DOMRQHE2DA> . You are receiving this because you authored the thread.Message ID: ***@***.***>