CODEWITHSUNDEEP
reactjswidthtimepickersizingmui-x
Pat
Pat

Reputation: 51

TimePicker mui-x taking up entire width of screen when clicked on. How do I set the width?

I've pretty much looked everywhere and have tried every solution posted I could find but nothing works. Can someone help me?

Screenshot: Here is a screenshot of the behavior when the time picker is opened

Here is my code:

<Controller
  name="startTime"
  control={control}
  rules={{ validate: validateTime }}
  render={({ field }) => (
    <TimePicker
      {...field}
      value={field?.value || null}
      format="HH:mm"
      name="startTime"
      ampm={false}
      minutesStep={15}
      label="24 hours"
      className="time-picker"
      slotProps={{
        textField: {
          sx: {
            borderRadius: 6,
            fieldset: { borderRadius: 6 },
            [`.${OutlinedInputClasses.root}`]: {
              height: 80,
              width: 300,
            },
            '& .MuiInputLabel-root': { lineHeight: 3 },
          },
        },
      }}
    />
  )}
/>;

Upvotes: 0

Views: 66

Answers (1)

Pat
Pat

Reputation: 51

I found the issue. It was a stylesheet issue:

body > div {
width: 100%;

}

Once I removed the above code it works fine now.

Upvotes: 0

Related Questions