Date/time picker cut off when increased font size

Received feedback from users that the default 12px font size is too small, so I’ve increased to 14px across all our apps. This has worked fine for the most part, except that the time picker on the date/time component is trimming the am/pm text off the end. I’ve increased the width of the component but that doesn’t help.

Changing “body” font size from theme typography back to 12px seems to solve this - seems while other input components have a customizable “dropdown font” customization option, the date/time and time components both simply use the body font.

Would be great if…

  1. The time and date/time components supported customization of dropdown font size like other components do
  2. The time and date/time components automatically adjusted the width of the dropdown so values are not trimmed when font size is increased
1 Like

I ran into the same issue when increasing the global body font size: the “am/pm” text in the Time / DateTime picker gets clipped even if I make the component wider. Since the dropdown uses the body font and doesn’t auto-resize, here are a few practical workarounds:

  1. Workaround A – Switch to 24‑hour format (no clipping)
  • Use 24‑hour format in the Time / DateTime component (e.g., 14:30 instead of 2:30 PM).

  • This removes the “AM/PM” suffix entirely, so there is nothing at the end of the string to be clipped when the font size is larger.

  1. Workaround B – Custom time dropdown with Select
  • Instead of using the built‑in time dropdown, use a Select component to represent time:

    • Populate it with time options at your desired interval (every 5, 10, or 15 minutes), e.g., “09:00”, “09:15”, “09:30”, etc.

    • Bind the Select value to the same field your Time/DateTime component used.

  • Select has its own sizing and styling options, so you can control the font size and width and make sure the entire label is visible.

Hey @pmadden and @Vishal1620, good news! Not sure if you noticed this, but if you go to Inspect on the Date Time component, then click the plus button in Styles, then Input font. (screenshot 1)

You will see a whole list of font options (screenshot 2)
Let me know how it goes after you try this! :raised_hands:t3: