You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am currently trying to pass an id to the dcc.Loading component or its parent container and I would like the id to be visible in the DOM such that I can target the CSS of the components inside the dcc.Loading via ID.
Please provide us your environment, so we can easily reproduce the issue.
if frontend related, tell us your Browser, Version and OS
OS: [e.g. iOS]
Browser: Chrome
Version [e.g. 22]
Describe the bug
Let's take the example app below - what I would have expected is that there would be an html div visible with a className="loading" and an id="loading-id". However, if I provide the className="loading" I see a div but it does not have the className="loading" in the DOM nor does it have the id="loading-id" in the DOM.
When I switch this to parent_className="loading", now I see a div with the className="loading", but I cannot attach an id to this parent container.
I am not a react expert, but from the source I can see that the id doesn't seem to be passed on in the return of the react component and is therefore not visible in the DOM? Is there any reason for that?
I would expect the id being passed on to the react component and visible in the DOM, so having a <div class="loading" id="loading-id" visible in the DOM.
Screenshots
The text was updated successfully, but these errors were encountered:
huong-li-nguyen
changed the title
[BUG] id not passed through react component of dcc.Loading
[BUG] id passed through dcc.Loading not visible in DOM
Jun 7, 2024
Describe your context
Hello guys 👋
I am currently trying to pass an
id
to the dcc.Loading component or its parent container and I would like theid
to be visible in the DOM such that I can target the CSS of the components inside thedcc.Loading
via ID.Please provide us your environment, so we can easily reproduce the issue.
pip list | grep dash
belowif frontend related, tell us your Browser, Version and OS
Describe the bug
Let's take the example app below - what I would have expected is that there would be an html div visible with a className="loading" and an id="loading-id". However, if I provide the
className="loading"
I see a div but it does not have the className="loading" in the DOM nor does it have the id="loading-id" in the DOM.When I switch this to
parent_className="loading"
, now I see a div with the className="loading", but I cannot attach an id to this parent container.I am not a react expert, but from the source I can see that the
id
doesn't seem to be passed on in the return of the react component and is therefore not visible in the DOM? Is there any reason for that?dash/components/dash-core-components/src/components/Loading.react.js
Lines 128 to 133 in 09252f8
Expected behavior
I would expect the
id
being passed on to the react component and visible in the DOM, so having a <div class="loading" id="loading-id" visible in the DOM.Screenshots
![Screenshot 2024-06-07 at 12 29 36](https://private-user-images.githubusercontent.com/90609403/337624275-b2f921bd-2a46-4073-8615-61d348f485b3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE2NjI5MzUsIm5iZiI6MTcyMTY2MjYzNSwicGF0aCI6Ii85MDYwOTQwMy8zMzc2MjQyNzUtYjJmOTIxYmQtMmE0Ni00MDczLTg2MTUtNjFkMzQ4ZjQ4NWIzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIyVDE1MzcxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU3ZDRhODk1MWI4NGRhYjk1YzcxYTMxMjJlZjE5NjU5ZTgzOGNkNDc2ZWQ0OTBlNGY2MzMzMDI1MjA4N2VlN2UmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.7ekS90JqIyg7kCgdmLo-p1LIZgKu1XzYTW1hhcPEhYE)
The text was updated successfully, but these errors were encountered: