search

onesine / react-tailwindcss-datepicker

Modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker.
https://react-tailwindcss-datepicker.vercel.app/
MIT License
537 stars 159 forks source link

Calendar width bug #211

Open Pep3M opened 11 months ago

Pep3M commented 11 months ago

image

Whether the Datepicker container is at a defined width or not, the calendar or wrapper stays narrow

Below is the component code: /// return ( <Datepicker primaryColor="primary" useRange={false} value={value} i18n='es' onChange={handleValueChange} separator='/' displayFormat='DD-MM-YYYY' /> );

///// `div className="flex flex-col w-80">

/div`

I tried trying to force the width through the classNames: {{wrapper: 'w-full'}} property and it didn't work

greetings!

groyGetaway commented 11 months ago

Getting the same issue. This is not working outside the box...

Made sure there wasnt any outside css that could have been impacting it. Also made sure I had all the right dependencies.

groyGetaway commented 11 months ago

The problem seems caused by the "grid-cols-7" being overwritten.

groyGetaway commented 11 months ago

The whole popover is impacted by the component parent... Thats a huge issue imo. The popover should be placed inside a portal.

groyGetaway commented 11 months ago

@Pep3M If the parent div has the "relative" property, it should help.

DavidQuartz commented 9 months ago

@Pep3M did you add './node_modules/react-tailwindcss-datepicker/dist/index.esm.js', inside the content list of your tailwind config?