Kevin Powell - Community•10mo ago

<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"/> 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 and ProfileModal, which are also <dialog/> elements, but being returned in an imported component, the .pick_up_dialog <dialog/> is getting conditionally rendered directly inside of the PortalHome component I've attached. The transition animation from the dialog{} declaration and other normal CSS settings are being applied to all three dialogs. But the dialog[open]::backdrop{} settings are not being applied to the conditionally rendered .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"; When the dialog is open and I inspect it, there is no ::backdrop element rendered in the DOM. What am I not understanding?

kWQYDDjj.js

11 Replies

b1mind•10mo ago

take off the [open] and see what it does dialog::backdrop {}

thethingisbackOP•10mo ago

no difference, still working on the imported compomnent dialogs but not the conditionally rendered one still workign meaning those two are getting the CSS applied while other one isn't, so nothiing's different

b1mind•10mo ago

yea not sure... I'd just blame React 😂 it makes everything harder than it needs to be.

thethingisbackOP•10mo ago

blast!

thethingisbackOP•10mo ago

well, in case anyone else answers here or you care to look, heres also my full un-factored css

C7QBHpi0.js

Jochem•10mo ago

might help to use something like codesandbox or stackblitz so people can look at it in their browser

thethingisbackOP•10mo ago

True, I'll post tmrw Okay here's a sandbox: https://codesandbox.io/p/sandbox/zen-shaw-qpqnt5?file=%2Fsrc%2Fstyles.css%3A11%2C1 'pickUpToday' is the useState that has to be true in order to render the .conditionalRendDiag dialog, which you can just manually set to true, false. I wish I could say I perfectly replicated the issue from my react project, but the ::backdrop{} pseudo-element in this code sandbox doesn't seem to have any effect on either the conditional or normally-rendered dialogs. Maybe we could figure out why that would be first, get it to work, then test the difference that I was talking about.. In my react project, the conditionally-rendered dialog is not receiving the dialog::backdrop{background:"blue"} CSS setting, and not showing any coloring in its "backdrop", while the other two non-conditional dialogs do reflect this CSS setting.

missymae•10mo ago

I get a 404 on your sandbox, maybe it's set to private?

thethingisbackOP•10mo ago

This may work: https://codesandbox.io/s/zen-shaw-qpqnt5?from-embed

nnall

CodeSandbox

zen-shaw-qpqnt5 - CodeSandbox

zen-shaw-qpqnt5 by nnall using react, react-dom, react-scripts

MarkBoots•10mo ago

according to the docs it is recommended to use the open/close methods to show the dialog, not by toggling the open attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog this might be the reason why the ::backdrop is not showing up. So add the dialog to the page and then call the open method on it

MDN Web Docs

: The Dialog element - HTML: HyperText Markup Language | MDN

The HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

MarkBoots•10mo ago

here a discussion on a bug-report (which isn't)

It is recommended to use the .show() or .showModal() methods to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it will be non-modal.

It is recommended to use the .show() or .showModal() methods to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it will be non-modal.

https://github.com/saadeghi/daisyui/issues/2052

GitHub

bug: Dialog backdrop not working when controlled using open · Iss...

What version of daisyUI are you using? v3.1.6 Describe your issue Thank you for building such an awesome library! I've been working with the Modal component and controlling it's state using...

Gaming

Programming

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