15 replies

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}

dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}

Attached is my react component which is conditionally rendering the

<dialog className = "pick_up_dialog"/>

<dialog className = "pick_up_dialog"/>

element based on whether a user has a reservation for the current day, according to data being received in an API call , "fetchReservations".

Unlike

ReserveModal

ReserveModal

and

ProfileModal

ProfileModal

, which are also

<dialog/>

<dialog/>

elements, but being returned in an imported component, the

.pick_up_dialog <dialog/>

.pick_up_dialog <dialog/>

is getting conditionally rendered directly inside of the PortalHome component I've attached.

The transition animation from the

dialog{}

dialog{}

declaration and other normal CSS settings are being applied to all three dialogs. But the

dialog[open]::backdrop{}

dialog[open]::backdrop{}

settings are not being applied to the conditionally rendered

.pick_up_dialog

.pick_up_dialog

.

Is there something about conditional rendering that changed the CSS access to an element in React?

My CSS is being imported in my App.js:

import style from "./components/reserve.css";

import style from "./components/reserve.css";

When the dialog is open and I inspect it, there is no ::backdrop element rendered in the DOM.

What am I not understanding?

kWQYDDjj.js9.41KB

KP-C

Kevin Powell - Community•3y ago•

15 replies

thethingisback

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}

dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}

Attached is my react component which is conditionally rendering the

<dialog className = "pick_up_dialog"/>

<dialog className = "pick_up_dialog"/>

element based on whether a user has a reservation for the current day, according to data being received in an API call , "fetchReservations".

Unlike

ReserveModal

ReserveModal

and

ProfileModal

ProfileModal

, which are also

<dialog/>

<dialog/>

elements, but being returned in an imported component, the

.pick_up_dialog <dialog/>

.pick_up_dialog <dialog/>

is getting conditionally rendered directly inside of the PortalHome component I've attached.

The transition animation from the

dialog{}

dialog{}

declaration and other normal CSS settings are being applied to all three dialogs. But the

dialog[open]::backdrop{}

dialog[open]::backdrop{}

settings are not being applied to the conditionally rendered

.pick_up_dialog

.pick_up_dialog

.

Is there something about conditional rendering that changed the CSS access to an element in React?

My CSS is being imported in my App.js:

import style from "./components/reserve.css";

import style from "./components/reserve.css";

When the dialog is open and I inspect it, there is no ::backdrop element rendered in the DOM.

What am I not understanding?

kWQYDDjj.js9.41KB

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

Similar Threads

Similar Threads

Similar Threads