Calendar's background is transparent

[ahmetkca]

[jrTilak]

Hey, @ahmetkca Can you provide more details about this issue like, any modification if you made on the component, your implementation of the component in UI etc, So that we could reproduce this issue and solve it. Because only with the information you provided, there is no way to track or reproduce the issue. 😶‍🌫️

[ahmetkca]

I just followed the Date Picker with Form.

[ahmetkca]

@jrTilak I tried setting background color but somehow there are still some components like lucide-react icons can be seen through Calendar.

[ahmetkca]

@jrTilak For example:

[Piyush-Kumar-Ghosh]

Hi, @ahmetkca,

I believe the issue you're experiencing may be related to some style customizations on your end. I recommend the following steps to troubleshoot:

1. Check the overlay and Z-index for components that can be seen through.
2. Try reproducing the issue without applying any customizations.

If the problem persists in the default variant, proceed with the following:

1. Inspect the CSS (inline, internal, and external) to identify styles with high priority affecting the components.

You can refer to the official documentation for an example at https://ui.shadcn.com/docs/components/date-picker#form.

Please provide additional details if possible to help in diagnosing the issue.

Thank you!

[jrTilak]

Yeah, @ahmetkca , You can debug as @Piyush-Kumar-Ghosh is saying, I also believe the issue you're experiencing may be related to some style customizations on your end as I was not able to reproduce it.🫠

[ahmetkca]

I can wrap the PopoverContent with <div className="z-50"> @jrTilak @Piyush-Kumar-Ghosh I didn't add any custom style but I don't know.

[Piyush-Kumar-Ghosh]

I can wrap the PopoverContent with <div className="z-50"> @jrTilak @Piyush-Kumar-Ghosh I add any custom style but I don't know.

Wrapping the PopoverContent with <div className="z-50"> sounds like a good approach.

If you're still facing styling issues, consider checking the CSS styling applied to the relevant class and ensuring the correct precedence order. This can be crucial in resolving any conflicts and achieving the desired custom styling.

[alimoezzi]

Were you able to solve this issue? @ahmetkca I have the same issue with popover.

[priyanthabuddhika]

I had the same issue. After a while I realized I have imported the radix-ui components instead of importing shadcn-ui components. Check if that is the case for you too.

with radix-ui, import { Popover, PopoverTrigger, PopoverContent } from "@radix-ui/react-popover"

with shadcn component, import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

[MyTotoro]

I have a similar issue with Select

I copied and pasted this example from the components page:

import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"

export function SelectDemo() {
    return (
        <>
            <Select>
                <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Select a fruit"/>
                </SelectTrigger>
                <SelectContent>
                    <SelectGroup>
                        <SelectLabel>Fruits</SelectLabel>
                        <SelectItem value="apple">Apple</SelectItem>
                        <SelectItem value="banana">Banana</SelectItem>
                        <SelectItem value="blueberry">Blueberry</SelectItem>
                        <SelectItem value="grapes">Grapes</SelectItem>
                        <SelectItem value="pineapple">Pineapple</SelectItem>
                    </SelectGroup>
                </SelectContent>
            </Select>
            <p>
                Test example text 
            </p>
        </>

    )
}

I have no CSS other than the default @tailwind ones

This is a brand new Vite project

EDIT: I admit I don't know ShadCN arch well and have not bothered to thoroughly read through the docs - but I played around found that if you add some theming (I just generated some dummy values from https://ui.shadcn.com/themes and copied it to my App.css file) in your global css, it fixes the issue:

I have no idea why this fixes it but I'm happy it's a fix (please let me know if this is breaking it more! )

[logan-qiu]

I had the same issue. After a while I realized I have imported the radix-ui components instead of importing shadcn-ui components. Check if that is the case for you too.

with radix-ui, import { Popover, PopoverTrigger, PopoverContent } from "@radix-ui/react-popover"

with shadcn component, import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

I found that one of the most annoying thing with Shadcn is that you will have to continue watching for the right imports lol

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.