Overflow scroll cuts off content

[mufty]

Got a pretty simple setup that's mostly just text and some bitmaps. Without overflow it looks something like this:

Adding limits to the flow elements that would make it scroll starts behaving all sorts of wrong.

max-height: 800;
overflow: scroll;

Just hides's the whole thing tho I can see in debug that the elements is there.

Trying to mess around with it more reveals that all the elements are being hidden by something. Adding more width to the element does show parts of the element's content.

It's like there is something on top of the whole element that's making the content invisible.

[ncannasse]

You need a component that encapsulate all your other objects. It will have fixed width/height and scroll activated

Le ven. 2 août 2024 à 09:52, Michal Gubriansky @.***> a écrit :

Got a pretty simple setup that's mostly just text and some bitmaps. Without overflow it looks something like this:

image.png (view on web) https://github.com/user-attachments/assets/196772e7-5044-4a65-a571-bf90427d99da

Adding limits to the flow elements that would make it scroll starts behaving all sorts of wrong.

max-height: 800;overflow: scroll;

Just hides's the whole thing tho I can see in debug that the elements is there.

image.png (view on web) https://github.com/user-attachments/assets/a9526687-e180-4962-b6ff-c0ea01ca327d

Trying to mess around with it more reveals that all the elements are being hidden by something. Adding more width to the element does show parts of the element's content.

image.png (view on web) https://github.com/user-attachments/assets/d3dfe171-3b24-47ea-bae1-dd8e130ee40d

It's like there is something on top of the whole element that's making the content invisible.

— Reply to this email directly, view it on GitHub https://github.com/HeapsIO/domkit/issues/60, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHZXQAMBDXATLQ4BZZ7UDDZPM3C7AVCNFSM6AAAAABL4A6Y4WVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ2DIMZSGE3DEOI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[mufty]

That's what I did tho.

It looks like this:

<flow class="scroll">
  .... all my text and everything I wanna scroll is here ...
</flow>

the scroll class style looks like this:

.scroll {
    layout: vertical;
    content-align: middle;
    height: 800;
    width: 700;
    overflow: scroll;
}

[mufty]

Debug image confirming that I tried this and it's still doing the same thing.

[ncannasse]

I mean you need a flow for the container of all data, then an outer flow that will perform the scroll and limit the size.

[mufty]

I mean you need a flow for the container of all data, then an outer flow that will perform the scroll and limit the size.

No success I tried something like this (pseudo code cuz there is no style attribute):

<flow style="height: 600; width: 1000; overflow: scroll;">
  <flow style="layout: vertical;content-align: middle;">
    ... all data / text ...
  </flow>
</flow>

wondering if it's cuz well there are more flows on top of this cuz this essentially it is just a section of one big flow that's using full screen then there is a flow that acts as a "window" in the middle of it and then that has this thing in it that I want to scroll.