Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

datatable broken in safari & ios

See original GitHub issue

Describe the bug

I have a simple application with a data table. It misrenders in safari. The table rows are appearing next to the header instead of below.

To Reproduce

data class Foo(val foo:String)

render("#target") {
        val s = storeOf(listOf(Foo("foo"), Foo("bar"), Foo("foobar")))
        val fooLens = buildLens<Foo, String>(
            id = "fooCol",
            getter = { it.foo },
            setter = { old, v -> old.copy(foo = v) })
        val selected = storeOf<Foo?>(null)
        s.data.render {
            dataTable(rows = s, rowIdProvider = { it.foo }, selection = selected) {
                columns() {
                    column(title = "Foo") {
                        lens(fooLens)
                    }
                }
            }
        }
}

Expected behavior

rows appear below each other

Screenshots

Desktop (please complete the following information):

MacOS / IOS
Safari
Fritz 0.13

Issue Analytics

State:
Created 2 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

jillesvangurpcommented, Nov 30, 2021

Maybe just document this in the readme of the component library. Something like :

Safari’s quirk mode has several known issues with Fritz2 components. Fritz2 components relies on html5 and css standard behavior. To prevent browsers such as Safari from engaging their quirks mode, put <!doctype html> at the top of your index.html.

1reaction

jillesvangurpcommented, Nov 29, 2021

Thanks, I played a bit with this to figure out what causes this. At first glance all the differences are trivial. So, I narrowed it down by trying things one by one.

It turns out that adding this at the top of our index.html fixes things: