Time schedule form design/UX doubt

[Darko_Vukoje]

Hi,

For the tennis league app, the club admin marks available time slots.

Then players (from their accounts) enter times when they can play matches by selecting available time slots that admin defined on the previous step.

The best UX view for app users is to have table view with day names as table headers and rows which represent hours

Attached 1st screen shot done by newtable that uses buttons that mimic various states by using emojis

As emojis are not standardized across ios and android, I run into problem so android users see plain emojis instead of checkmarks in the screen shot included.

So i habe to switch to common unicode characters (2nd screen shot) which is ugly.

Two questions:

1. Is there a way to standardize emojis across platforms? I cant use images in new table as they don’t have actions

2. what would you recommend how to build this control for managing time sheets (columns are day names and rows are hours)
   Each cell in the screen should have action and showing different states (ideally images or text)

I tried with custom container with hours collection for each hour as a row thay has a list of days as a grid which is set to horizontal view. But you can’t adjust horizontal cards to mimic check boxes. Checkbox collection unfortunatelly does not offer horizontal view.

Thanks in advance for your help and idea suggestions

[Darko_Vukoje]

Any suggestions which components you would use to display a calendar her with options to:

1. catch action for each item in the “grid”
2. display different image for each grid item

The app is showing different time slots per days (horizontally) and hours (vertically)

Thanks

[ThinhDinh]

It’s not a calendar per se, but how about something like this? Does it fit your use case?

[Darko_Vukoje]

Visually yes.

I need 3rd state (not only check/uncheck), but that can be solved with images.

What kind of component is this? I use newtable currently.

Strange thing: I started with free plan and chosen new table component, then switched to maker plan and Glide has automatically upgraded me to inline list component but the functionality remained.

This is how it looks like currently. It does the work but the BIG ISSUE is customer being unable to see all days and hours on small screen. This could be solved by fixing headers row (days) and first column (hours), but I don’t dare experimenting with CSS - and I don’t know CSS at all.

Is it too complicated to add CSS to fix header row and first column?

[ThinhDinh]

@Darko_Vukoje

What kind of component is this? I use newtable currently.

It’s new table.

Is it correct that your screenshot is also a new table?

[Darko_Vukoje]

correct ! This is what I use.

I use column type buttons and emojis to handle 3-4 different cell states.

I tried using image column type, but sometimes I need to display text in a cell, therefore I’ve chosen button.

Any idea how to fix first row and column? This is causing my users a big issue when scrolling vertically and horizontally

[Darko_Vukoje]

and I think there is bug in Glide with new table component:

… dots are displayed at the end although collection item actions have been disabled. When user clicks on … at the end (scrolling completely right), the app crashes and restartes:

[Darren_Murphy]

@Darko_Vukoje

Any idea how to fix first row and column? This is causing my users a big issue when scrolling vertically and horizontally

I have some CSS that will freeze the header row (@tuzin helped me with that), but unfortunately it breaks the horizontal scrolling. But here is what I use anyway, in case you want to experiment:

.stickythead div:has(>div >table) {
  display: contents;
}

.stickythead thead {
  position: sticky;
  top: 0px;
  z-index: 999;
  background-color: black;
}

To use the above, you would give your Table a custom class name of stickythead

[Darko_Vukoje]

Thanks @Darren_Murphy , unfortunately breaking horizontal scrolling is not an option to me.

If anyone has solution to freeze top row and first column without breaking both direction scrollings, please let me know. Thanks in advance.

I am scared of CSSs

[tuzin]

This is what you can use to make your table header fixed while being able to scroll both ways. Note that 70vh means that your table will take up maximum of 70% of the vertical space that fits on a screen. You can play around with that value to fine-tune it as you prefer. background-color: var(--gv-n50); makes the header’s background color the same as the app’s background color. This is useful in case you’re using auto light/dark mode setting.

.stickythead div:has(>div >table) {
  max-height: 70vh;
}

.stickythead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 999;
  background-color: var(--gv-n50);
}

[Darko_Vukoje]

@Darren_Murphy

stickythead

Thanks for helping. I added your CSS code (sharing screen shot below)

then applied it to my component:

but it didn’t change anything - here is my screen shot:

It’s probably because my table has controls above and (hidden) below?

Any thoughts?

[Darko_Vukoje]

[tuzin]

Have you tried different values for max-height property? Also please check you’ve published the new version of the app.

[tuzin]

I find the 60vh value more suitable for mobile preview

[Darko_Vukoje]

I haven’t published it. Tried on computer in the glide player. Would it work in glide player on computer?

I actually have maker plan and can publish only one app at the time. I don’t dare making changes to official app that is used publicly.

Haven’t tried changing max-height.

[Darren_Murphy]

Have you enabled the CSS in the builder?

[Darko_Vukoje]

Preview turned on and tried playing with max-height, no any single change

[Darko_Vukoje]

my new table lives within container. Does that affect it?

[Darko_Vukoje]

[Darren_Murphy]

No, it shouldn’t. I’m using the same CSS on a table inside a container.