Search code examples
cssreactjsmaterial-uistylingmui-x

Anyway to make timepicker pop up match the full width of parent form control?

 <FormControl fullWidth>
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <TimePicker
             views={["hours", "minutes", "seconds"]}
             label={t("StrategyManager.Select_Time")}
             value={timer}
             onChange={(selectedTime) => handleTimeSelection(selectedTime, "timer")}
             ampm={false}
             />
   </LocalizationProvider>
</FormControl>

enter image description here

At the moment I have the above component in react and typescript using MUI version v6.16.1 but the popper only sits to the left of the parent field.

Ideally I'd like it to span the full width of the form control with equal width for each hours / minutes / seconds columns but I can't seem to target the wrapper.

Any help with styling this component would be really appreciated!

Solution

  • there is a way to do this, you have to use getBoundingClientRect() to get the input width(with the help of useRef). and then use it to set the time picker dropdown width, see my codesandbox example below

    Edit interesting-glitter-t9qxrl

    there are a few things you should note:

    • I used desktopModeMediaQuery="" to deactivate the mobile variant of the time picker, because I'm overriding layout styles which breaks the mobile variant
    • the width won't update if you resize the window, I know this won't likely happen with real users but just fyi

    I honestly feel like this solution is very hacky so unless you really need it and didn't find a better alternative