How to change dropdown width for time select component

💬 App Building
1
  • Goal:
    I'm making a portal for users to be able to update their availability.
    Its for a repeating time pattern so I don't want to use a date-time picker. The time select component is perfect...except the dropdown width is unusably narrow.

I have had a good look around and I can't find any info about why this is and if I can change it. I know other select types have the ability to set the min-width of the dropdown, I have used it for the weekday dropdown already.
I have also tried removing the add-ons (both together as well as individually), as well as increasing the width of the component. No change.

This feels like a bug, but I really hope its just a setting I've missed.

image
image726×783 49.3 KB

2

Also might be a separate topic here - but I have also noticed that the addons intermittently disappear if the component has been interacted with.

image
image683×759 51.1 KB

3

Hello @Rachael!

If you don't mind a simple custom CSS solution that should adhere through any updates through Retool, adding this to your custom CSS for your app should resolve your issue. Just be sure to change the attribute selector [id*="timeComponent"] to the name of your actual component:

[class*="_main"][role="dialog"] [class*="_popoverInner"]:has([id*="timeComponent"]) {
  width: auto !important;
}

Does this work as a solution for you?

4 Likes
4

Thank you for this, I was trying to avoid CSS because of the warnings that it wouldn't be stable across updates. This should be good.

1 Like
5

@Rachael any time! :slight_smile: Yep -- I always operate under the rule of thumb that if custom CSS needs to be applied and there seems to be no other way -- to always use substring matching with your attributes, and that the attributes you target have a value that seems like it wouldn't ever change.

I'm so happy that this worked for you! Cheers!

1 Like