# Time schedule form design/UX doubt

**URL:** <https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614>\
**Category:** Ask for Help\
**Created:** [April 16, 2024, 7:16am UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614 "2024-04-16T07:16:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 16, 2024, 7:16am UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/1 "2024-04-16T07:16:24Z")

</div>

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

 ![IMG_6256](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/8/48cd2ec8087e3eb6795d4a5e7b9e4dd9cee1f1a1.png)

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.

 ![IMG_6257](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1caba79a8410d625b1d3ec90c98f38ad007a70ae.png)

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

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 16, 2024, 8:42pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/2 "2024-04-16T20:42:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 16, 2024, 11:34pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/3 "2024-04-16T23:34:17Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/6/961ec76d3363111803fd12e49f456d6f73e50c09.png)

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

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 4:22am UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/4 "2024-04-17T04:22:15Z")

</div>

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?**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c50bcea28e24cb4a8db2e443c978572fed3b806.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 17, 2024, 4:24am UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/5 "2024-04-17T04:24:51Z")

</div>

> [@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?

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 4:42am UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/6 "2024-04-17T04:42:36Z")

</div>

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 ☹

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 4:45am UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/7 "2024-04-17T04:45:26Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/e/be3a7824e8c1d859bc9b2c44342c77aaa36162ee.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c7d3b95652d922092cffeaa79a8e24a7e6e22d5c.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 17, 2024, 5:14am UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/8 "2024-04-17T05:14:13Z")

</div>

> [@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:

```auto
.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`

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 6:59am UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/9 "2024-04-17T06:59:22Z")

</div>

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 ☹

---

<div class="post-metadata">

**Author:** ![tuzin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tuzin/32/86077_2.png) [@tuzin](https://community.glideapps.com/u/tuzin)\
**Post date:** [April 17, 2024, 7:40am UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/10 "2024-04-17T07:40:35Z")

</div>

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.

```auto
.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);
}

```

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 12:25pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/11 "2024-04-17T12:25:34Z")

</div>

> [@Darren\_Murphy](#):
>
> stickythead

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/5/f510789a7be2ee43071c1ac80d9f287897d5a89c.png)

then applied it to my component:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/6/5617a77e8b929b0cac4ee35495961740c484c2b8.png)

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/3/d3222c70b8d4ca0bfae625a941a44b407af83586.png)

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

Any thoughts?

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 12:26pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/12 "2024-04-17T12:26:23Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/f/5fc8d4f126a9a6e2e748d0df45234c3ace0ed853.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/7/57a46d42c0844da9db1a686151224759b9f3f350.png)

---

<div class="post-metadata">

**Author:** ![tuzin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tuzin/32/86077_2.png) [@tuzin](https://community.glideapps.com/u/tuzin)\
**Post date:** [April 17, 2024, 12:47pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/13 "2024-04-17T12:47:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tuzin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tuzin/32/86077_2.png) [@tuzin](https://community.glideapps.com/u/tuzin)\
**Post date:** [April 17, 2024, 12:50pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/14 "2024-04-17T12:50:19Z")

</div>

I find the 60vh value more suitable for mobile preview

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 12:58pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/15 "2024-04-17T12:58:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 17, 2024, 1:00pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/16 "2024-04-17T13:00:50Z")

</div>

Have you enabled the CSS in the builder?

 ![CleanShot 2024-04-17 at 21.00.10@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/5/c5c3f2f36ebbd88917ac3bbf35076a43b7cf2f55.png)

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 1:04pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/17 "2024-04-17T13:04:04Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/5/25b41c8abfe6bc609f94d88aff815dc6aafca796.png)

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 1:04pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/18 "2024-04-17T13:04:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Darko\_Vukoje](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darko_vukoje/32/73227_2.png) [@Darko\_Vukoje](https://community.glideapps.com/u/Darko_Vukoje)\
**Post date:** [April 17, 2024, 1:05pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/19 "2024-04-17T13:05:38Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/2/42c229a074ffd200f4760809367d8a69623600e8.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 17, 2024, 1:05pm UTC](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614/20 "2024-04-17T13:05:58Z")

</div>

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

[Next page](https://community.glideapps.com/t/time-schedule-form-design-ux-doubt/72614.md?page=2)