Dialog element not rendering over another dialog element on mobile view
i have 2 sibling dialogs the first one has a button that opens another dialog over it
it works on laptops but not on mobile view ?
why is that the case??
in the responsive mode it doesnt work?? is that a bug in devtools?
cuz when i just shrink the tab without the responsive mode it works?
19 Replies
it doesnt open when responsive mode is on in a mobile layout, itll be 2 dialogs open at once the latter should open on top of it right?? it doesnt do that on mobile layout 😦
If you set up a codepen or similar it might be easier for somebody to help you debug this.
You may not have a resize event on the window so if the page doesn't load at that size it errors? Dev tools responsive mode doesn't actually emulate a mobile oS or browser; its just illustrating how the layout responds to screen sixes/aspect ratios
But yes codepen or stackbkitz etc would be most effective
Yes itd be best to setup a code pen but I have no idea how to replicate this as it’s in react
@clevermissfox
Since it works when I don’t have the responsive mode on and shrink that tab will it work on mobile?
I’m kinda confused cuz with the mode off it works and with it on Feb dialog doesn’t show ðŸ˜
you can copy the rendered html and css from browser devtools and past that in the codepen
You can use react in codepen!
Or stackblitz
Or scrimba
Do you have it on github ?
For codepen you use the cdn of the react version
Then just import it
Stackbkitz you can import the whole repo
Scrimba you can add the dependancies and drag and drop your files
Do you have a media query for smaller screen sizes thats changing the styling of the dialog(s)? Could you be changing the display property on a
dialog instead of dialog[open] ? If not you'll need to set up a https://codepen.io https://scrimba.com https://stackblitz.com
This is how react works on codepen , you add the cdns and use the Babel preprocessor. Make sure youre using the right root.render/createRoot for the version. You can also manually add in the CDN for the version youre using in your project instead of searching for it in codepen.
https://youtu.be/52KyhNEioT8?si=S4KHfrYVKh5oRDkICodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
Learn to code with Scrimba
Scrimba is the fast way of learning to code! Our interactive courses and tutorials will teach you React, Vue, Angular, Web Development, Node.JS, JavaScript, HTML, CSS, and more.
StackBlitz | Instant Dev Environments | Click. Code. Done.
StackBlitz is the collaborative browser-based IDE for web developers. StackBlitz eliminates time-consuming local configuration and lets developers spend more time building.
NewCoders
YouTube
How to use react on codepen || first react code :)!!!
In this video u learn how to use react on codepen , how know how to write
you'r first react code on codepen
@Mannix @CuriousMissFox Ty both of you I’ll look into trying to setup a codepen but at the same time I used tailwindCSS so idk how I’d be getting them to plan CSS for codepens ðŸ˜
I’ll look into it
you can add tailwind's cdn link in the codepen to 😉
@Mannix @CuriousMissFox @Chris Bolson
https://codepen.io/Mohammad-Ahnaf-the-animator/pen/VYLaGzZ
heres what ive come up with but im getting reactDom is not defined despite having the CDN's 😦
my brain is fried 😦
im so lost 😦
cdns ive added are react and react dom and tailwindCSS in that order
https://codepen.io/Mohammad-Ahnaf-the-animator/pen/VYLaGzZ
nvm i got this working one! Its an awful representation but i guess it should do!!
demonstrates 2 dialogs open together!!
@Mannix @CuriousMissFox @Chris Bolson
it seems to work here
but it still doesnt work when i run my normal code 😦
the codepen doesnt include react draggable library btw on mobile
GUYS NEVERMIND I FIXED IT !!!
it was an issue with the react draggable library i was using to implement drag feature on mobile i had to had a cancel prop!!
it was disabling pointer events on the button in mobile
@Mannix @CuriousMissFox @Chris Bolson
tysm guys !!
Excellent work !! So glad you kept at it and found the issue !!
Your codePen may not be working because like I said
make sure you’re using the right root.render/createRoot for the version.
You had the CDN for react18 but no createRoot which is necessary with 18.The video on yt u sent had the same thing and it worked for them?
But for me I had to go to the OG react docs and get the CDN from there and then the .render() worked for me
Also I added the tailwindCSS CDN as well through the codepen but for some reason I don’t think my tailwind styles were applied
I’m glad I found the solution to my issue
Bug thanks to y’all for pushing me through to overcome my fear of using react on the codepen lol ðŸ˜
The video on YT is 2 years old and so codepens CDN was likely for react 17. Now the default codepen adds when you search is 18, which is what's on your project , which is why I added that disclaimer into my comment.
And why I suggested you could get the cdn for the version of react your project is using as an alternative to just using what codepen defaults fo
Not sure about tailwind as I don't use it but you could probably search YT or Google to see if there another step
Appreciate it ! Tysm for a detailed response!