react-tailwindcss-datepicker icon indicating copy to clipboard operation
react-tailwindcss-datepicker copied to clipboard

Calendar width bug

Open Pep3M opened this issue 2 years ago • 5 comments

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"> <RangeDatepicker onRangeSelected={handleOnRangeSelected} /> /div

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

greetings!

Pep3M avatar Nov 01 '23 16:11 Pep3M

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 avatar Nov 02 '23 14:11 groyGetaway

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

groyGetaway avatar Nov 02 '23 14:11 groyGetaway

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

groyGetaway avatar Nov 02 '23 14:11 groyGetaway

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

groyGetaway avatar Nov 02 '23 14:11 groyGetaway

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

DavidQuartz avatar Dec 08 '23 22:12 DavidQuartz