flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Datepicker has transparent background on 4.0

Open czue opened this issue 1 month ago • 5 comments

Describe the bug

When I upgrade to 4.0 my datepicker has a transparent background (which then shows the page behind it). Happens in light and dark mode.

This works fine in 3.1.2.

Is this a known change of behavior and something I have to confiure to work around?

To Reproduce

This is the html that is reproducing it on my side, though I have other styles on the page:

<div class="relative max-w-sm">
  <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
      <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
    </svg>
  </div>
  <input datepicker id="default-datepicker" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
</div>

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Image

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser Chrome

Additional context I'm not sure if there are any other styles on my page that might be interfering with this... If it isn't readily reproducible in a standard project I can try to dig deeper.

czue avatar Nov 27 '25 16:11 czue

Same problem.

rungg12 avatar Dec 05 '25 13:12 rungg12

hey @czue, @rungg12,

did you also upgrade your project to tailwind v4 and flowbite v4?

https://flowbite.com/docs/getting-started/quickstart/

some classes have changed and we introduced variables

zoltanszogyenyi avatar Dec 09 '25 10:12 zoltanszogyenyi

no there was no change. I use it at multiple pages on my webapp, but it does this only in one site, all the others work fine.

rungg12 avatar Dec 09 '25 10:12 rungg12

have you updated the v4.0.1?

in the v4.0.1 patch from v4.0.0 we actually added the proper styles for the datepicker

zoltanszogyenyi avatar Dec 09 '25 10:12 zoltanszogyenyi

I just tested again on 4.0.1 and am still seeing the issue. I'm also using DaisyUI on the page if that might matter...

czue avatar Dec 09 '25 15:12 czue