Date Time Component Not Wrapping Text (Clipped Text)

Report a Bug
1

Team ID:

App ID:

Description

  • When the screen width is less than 600px, the “Label” text on the Date Time component is being clipped rather than wrapped.

    Screenshot 2024-03-28 at 4.51.52 PM
    Screenshot 2024-03-28 at 4.51.52 PM914×382 16.8 KB

  • Example way to fix with CSS
    Class to modify:
    image.png
    Disable the white-space: nowrap;
    If you had a custom selector you could override with:

.KEfnF {
white-space: wrap !important;
}

How to replicate

  • Add the “Date Time” component.
  • Add a “Label” with more than 37 characters.
  • View the app on a device with a screen width of less than 600px.
2

This is not a stable class name, if you’re planning to find a workaround you should name the classes accordingly.

1 Like
3

Thanks! I’m not actually planning on trying the workaround because our plan doesn’t have access to CSS, but that was just a test my friend did in the browser to try to determine the issue.

4

You can replace it with a text component for situations that require a long description.
Or you use rich text and inline CSS to arrange it more compactly.

3 Likes
5

Thanks, I appreciate the suggestion. I’m aware there are workarounds, I’m just hoping this is a fairly simple bug for the Glide team to fix. It is the only component type (of many) that I’m using in a form that isn’t wrapping properly.

6

However, in my opinion, this is not a bug but a feature request, as it is intended to be that way. If you like labels that exceed 2 lines, you can use the method I mentioned above. Alternatively, you can separate the label by placing it in a placeholder. If you insist on the label position, then the only way is with CSS.

2 Likes
7

Are you certain it’s intended to be that way? I find it odd that every other component in my form has text wrap on except the Date Time component. How would it be a feature that the text gets clipped? Maybe I’m misunderstanding, but I don’t see any value in it clipping rather than wrapping.

If it’s a feature, shouldn’t there be an indication of max characters on the label section of the component for mobile devices?

1 Like
8

They consistently apply it to a component called “picker.”

Screenshot 2024-03-29 at 20.45.33
Screenshot 2024-03-29 at 20.45.331246×190 9.46 KB

9

See, I would also call that a bug haha. I guess we just have a difference in opinion, which is okay. The Glide development team can choose whether to change it or not.

To clarify, the reason I would call it a bug is because it is my assumption that it is not performing as intended. If it is indeed intended to be that way, it’s odd to me because I don’t see any value in the way that it functions. If it requires a “workaround” or basically the Apple advice of “you’re holding it the wrong way” (since you could “fix” it by turning your device to landscape) haha, I’d call it a bug.

I don’t see a reason why the picker component wouldn’t behave like the choice component.

IMG_7858
IMG_78581125×456 47.6 KB

I appreciate your thoughts on it, I’m fine with “agreeing to disagree”.

1 Like
10

Your comparison is not apples to apples. Trust me, this will not be prioritized for completion. You’re just wasting energy.

11

I’m really not trying to argue with you. I don’t understand why you care so much that I’ve submitted it as a bug. It’s nothing personal that we don’t agree whether or not it’s a bug.

If it’s not prioritized, my app isn’t ruined. I can do workarounds until it’s fixed.

I appreciate you giving input on the available workarounds.

I’m simply reporting it like I will with any other bug so that the Glide team is aware of it in case they aren’t already.

1 Like