rctneil
Explore posts from serversKPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Not a major issue
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
So all looks good apart from Firefox where it works fine but on close it just vanishes and doesn't animate out. I can live with that. I think it's a lack of support for
allow-discrete.116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
That does it. Not sure why though as it's not absolutely positioned.
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Nope, changing the easing doesn't help. Very weird
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Will do. My current task is a bit away from that, just trying to complete the dialog panel I liked to in the codepen. Then i'll go back and style the regular dialogs where I may his this issue again!
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Anyone have any ideas how to get rid of the closing jump in Safari?
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
@Chris Bolson That is exactly what I asked Adam Argyle on Blue Sky earlier today (https://bsky.app/profile/rctneil.co.uk/post/3lk45csp74k2w)
It confused me. I've managed to put this toegther which is super close to what I am after:
https://codepen.io/rctneil/pen/VYwMXmO?editors=1100
Just unsure why, when closing, it jumps downwards a little in Safari?
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
This is my fork where I tried switching it to the right: https://codepen.io/rctneil/pen/EaxwbLG
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Slowly making progress with this, but a related question.
@Chris Bolson In this demo here: https://codepen.io/argyleink/pen/jOgxGmX Any idea how I can make the animation come in from the right hand side? I've swapped all the appropriate properties but the "translate from right" is messed up. Any suggestions?
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Maybe my code got a bit out of wack. I'll try to tidy it up and see how I get on
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Awesome. Thanks @Chris Bolson
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Actually that’s a good shout. I may try that. There is nothing shared between them. It’s just I want global dialog styles and then ones specific for this mobile nav so that may be a solution. As I said I’ll try to build a demo and have a play with all: initial. Appreciate the suggestion!
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
I'll build a demo this evening
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
I'll work on one and post back
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
But it doesn’t! That’s the whole reason I am posting here.
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
What do you mean by “it works, it just kills the styles for EVERYTHING?”
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
I thought the
:not selector should work and that's what I wanted to discuss but @ἔρως kept pushing the conversation around to correct/incorrect usage of the <dialog> element.
My selector is dialog:not(#mobile-nav) {, further down, and nested within that, I have &[open].
These styles are in one layer, and my #mobile-nav styles are in a higher layer.
On the subject of the use of <dialog> here, can we park this in this topic and stay on track. Whether you think the use is right or wrong for this situation, right here, right now, I do not care. It is a valid discussion and I am more than happy to start another thread to discuss that but let's stay on topic and discuss why the selector I have written is not working. Fair?
I'd appreciate any discussion and comments from anyone about how we can solve this.116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
thanks
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
ok
116 replies
KPCKevin Powell - Community
•Created by rctneil on 3/10/2025 in #front-end
Dialog styling with nested vanilla CSS
Ok, Look forward to seeing what you find
116 replies