Air Date/Time Picker Pro CSS to Control Font

Need help Plugins
1

When using the following CSS I am able to dynamically control the size of the Air Date/Time Picker Pro element according to browser size. However, the “font-size” property has no effect. Any suggestions on how the font size can be controlled via CSS?

.date-time-picker {
font-size: clamp(0.625rem, 0.489rem + 0.68vw, 1rem) !important;
height: clamp(1.375rem, 1.102rem + 1.36vw, 2.125rem) !important;
width: clamp(9.375rem, 8.239rem + 5.68vw, 12.5rem) !important;
padding: 0em 1em !important;
border-radius: 0.3em !important;
}

2

Hi @joe10

Thanks for sharing the details and the CSS snippet - that helps a lot.

Short answer: your CSS is working correctly, but the font-size isn’t applied because the Air Date/Time Picker Pro renders the visible text inside an internal input element, not on the root .date-time-picker wrapper itself. So changing font-size on the container won’t affect the actual text.

Why this happens

The plugin uses its own internal structure (wrapper → input field → value). The size of the element responds to your CSS, but the text is controlled by the inner input, which has its own font styles.

What to try instead

You’ll need to target the input inside the picker, for example:

.date-time-picker input {
  font-size: clamp(0.625rem, 0.489rem + 0.68vw, 1rem) !important;
}

If your app has multiple pickers and you want to be more specific, you can also scope it via a parent group or unique class:

.my-datetime-wrapper .date-time-picker input {
  font-size: clamp(0.625rem, 0.489rem + 0.68vw, 1rem) !important;
}

Important notes

  • Use the browser inspector to confirm the exact selector (input, .flatpickr-input, etc.), as Bubble may wrap the element slightly differently depending on layout.
  • This approach is expected behavior and not a bug — the plugin intentionally styles the input separately for consistency.
  • Your clamp() logic is perfectly fine and will work once applied to the correct element.

If you run into a case where the selector differs in your setup, feel free to share a quick screenshot of the inspected DOM, and we’ll point you to the exact class to target.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1 Like
3

Support team, Thank you for your help. I was able to make it work with the following code…

.body-base-16 {
font-size: clamp(0.625rem, 0.489rem + 0.68vw, 1rem) !important;
}

/* 1. Set height on the wrapper so it doesn’t collapse /
.date-time-picker {
height: clamp(1.375rem, 1.102rem + 1.36vw, 2.125rem) !important;
width: clamp(9.375rem, 8.239rem + 5.68vw, 12.5rem) !important;
min-height: clamp(1.375rem, 1.102rem + 1.36vw, 2.125rem) !important;
display: flex !important; / Prevents collapse by forcing layout */
}

/* 2. Make input fill container exactly /
.date-time-picker input {
font-size: inherit !important;
height: 100% !important; / Take height from the parent above /
width: 100% !important;
padding: 0 1em !important;
margin: 0 !important;
box-sizing: border-box !important;
line-height: normal !important; / Prevents text from clipping */
}

/* 3. Placeholder Reset */
.date-time-picker input::placeholder {
font-size: inherit !important;
padding: 0 !important;
margin: 0 !important;
}

1 Like
4

Hi @joe10,

Thanks a lot for the update - really appreciate you taking the time to share the final solution.

Great to hear that this approach worked well and that you were able to achieve the dynamic sizing you were aiming for.

Your breakdown and comments are spot on and may also be useful for other users with similar requirements, so thanks for sharing them with us.

At this point, could you please double-check everything on your end across the target screen sizes and confirm that there are no remaining concerns or edge cases?

If anything else comes up, feel free to share your vision with us - we’ll be happy to review it.

Thanks again, and we’re always here if you need anything.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3