[Elm-UI] Element.table scrolls vertically on iOS with scrollbarX

Does anyone know of a fix for this?

It creates a really bad user experience, and makes the table function unusable when supporting iOS, (might be all touch devices :man_shrugging:)

Here’s an Ellie, which works as expected in a desktop browser, but scrolls in every possible direction on iOS - so if the user tries to scroll the page by flicking up or down on the table, all that happens is the table scrolls and not the page.

https://ellie-app.com/cWHLTBR3q4qa1

It appears that it may be related to the height of the content - increasing the number of rows removes this problem, but that’s only useful if there is a minimum number of rows taking up a minimum height.

I’ll continue digging around, hopefully someone has already solved this :slight_smile:

Did you try adding El.clipY next to El.scrollbarX? There is a weird CSS issue, where setting overflow for one dimension changes the behaviour of the other unless it’s specifically defined to be something else.

2 Likes

@gampleman Yep, that solved it - thank you very much. :+1:

Correction: It solved it in the Ellie, but not completely in my app.

I have some tables that are loaded with data that the user can then filter down in order to focus in on any number/combination of rows they choose.

When the data is first filtered, the table continues to behave as it should thanks to El.clipY, but when the device is rotated to change the orientation, then El.clipY appears to be ignored and we’re back to square to one.

I’ll post another Ellie shortly that shows the behaviour.

(There are zero changes to the view code when the device switches from Portrait to Landscape and back again)

Correction 2: The Ellie does not suffer from the same effect as my app, so the issue is now my app.

Time to investigate what is causing the behaviour to change when the orientation changes…

OK, this is weird.

It appears that the order that El.scrollbarX and El.clipY are in the list of attributes is important.

This works as expected

El.table
    [ El.scrollbarX
    , El.clipY
    ]
    ...

This has no effect on iOS

El.table
    [ El.clipY
    , El.scrollbarX
    ]
    ...

This Ellie demonstrates both.

So the problem wasn’t my app, just that I placed clipY before scrollbarX

Aaaaaargh…

Time to pour a dark and stormy and sit in the sun for a bit :hot_face: :slight_smile:

3 Likes

Sounds like you should file a bug report with some nice reproduction, pretty sure that this isn’t the intended behaviour of elm-ui.

Done. Issue.

2 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.