table layout: strange results when combining mobile & width

[jaro-io]

description

i am working with the new layout: table option and so far i really love it! 🥰 ✨ i wanted to show more content on mobile, so i played around with the new mobile: true option for columns. it works, but i feel that when combined with smaller width options, it can produce strange / unexpected results.

in my example i have a "total" column, where i set the option width: 1/12. looks & works great on desktop. but now when viewing the column on mobile, it still uses the 1/12 width, cutting off nearly the entire content.

expected behavior i was expecting that when on a mobile breakpoint, any set width options would be ignored and column sizes were set to auto. this only made sense to me, because it is possible to hide columns on mobile that are visible on desktop. so already set widths might lead to new, unexpected grid layouts on mobile.

another solution i can think of would be adding custom widths for mobile, maybe like so:

columns:
    total:
        label: Total
        width: 1/12
        mobile:
            enabled: true
            width: 1/2

to reproduce

add a pages section with the following settings:

headline: Headline
type: pages
layout: table
columns:
    total:
        label: Total
        width: 1/12
        mobile: true

---

thank you so much for looking into this! such a great release! 🌻

[afbora]

I like the mobile.width idea but implementing this may not be easy. If this is difficult, I suggest all columns width to be auto (will ignored width prop) on mobile.

[afbora]

I suggest all columns width to be auto (will ignored width prop) on mobile.

It's actually an easy idea, but it might not be that easy to solve. Because all [data-mobile] attribute affects what happens. How do we select columns that have both [data-mobile] attribute and custom width that style="width: X%;"?

[distantnative]

Instead of doing :style="'width:' + width(column.width)" we could do something like :style="'--width: ' + width(column.width)" and then

@media screen and (min-width: 30em) {
  .k-table-column 
    width: var(--width);
  }
}

[afbora]

@distantnative I tried your solution but it doesn't seem to provide exactly the solution we want 🤷‍♂️

[miragecraft]

You can actually set fixed width for column in the blueprint even though the doc says it only take fractions.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. This is for us to prioritize issues that are still relevant to our community. It will be closed if no further activity occurs within the next 14 days. If this issue is still relevant to you, please leave a comment.

[bastianallgeier]

This is finally fixed.