lightning-js / ui-components

Lightning UI Components for Solid & Blits
https://lightning-js.github.io/ui-components/
Apache License 2.0
11 stars 4 forks source link

bug: Column children in wrong position on scroll #86

Closed CosmaVergari closed 1 month ago

CosmaVergari commented 6 months ago

In the Solid Column component, with scroll="edge" the unselected items get randomly misplaced when scrolling down (the focused element is in red)

Screenshot 2024-02-26 alle 17 52 33

If no scrolling is triggered, the elements go to the correct position after they have received focus:

Screenshot 2024-02-26 alle 17 59 11

When using scroll="auto" or "always" some elements are crammed above the focused element:

Screenshot_2024-02-26_alle_16 53 46

Here is a code snippet of the example I'm running:

<Column
    scroll="edge"
    style={{ Container: { width: 590, height: 932, x: 30, y: 0, gap: 20 } }}
>
    <For each={props.seasons}>
        {(season) => {
            return <Text style={buttonStyles.Label}>{season.seasonTitle}</Text>;
        }}
    </For>
</Column>

Here is buttonStyles.Label:

Label: {
    fontFamily: "Regular",
    fontSize: 28,
    lineHeight: 36,
    letterSpacing: 0.5,
    maxLines: 1,
    overflowSuffix: "...",
    contain: "width",
    color: 0xfafafaff,
    focus: {
        color: 0xff0000ff,
    },
    x: 30,
    y: 12,
        width: 500,
},

It seems to be some positioning problem affecting both lng/solid and the renderer

anthony9187 commented 6 months ago

Thanks for bringing this to our attention! We'll take a look at this and keep you updated on our progress

anthony9187 commented 1 month ago

@CosmaVergari I'm going to close this issue as I believe this has been resolved and we've moved the repo to a new location. If you're still experiencing this problem please open an issue here: https://github.com/rdkcentral/solid-ui