KPC
Kevin Powell - Community•7mo ago
MagicEmperor

Self Positioning modal

I wanted advice on how should I go about this , should just simply calculate the space anytime an item is hovered with JS and add classes or is there any better CSS only way or any simpler approach
4 Replies
MarkBoots
MarkBoots•7mo ago
Yea, get the viewport offset of the hovered item. If that is greater then the popup height, place above, otherwise below. Can not think of a css-only way
MagicEmperor
MagicEmperor•7mo ago
after i made the post i found this vid about the new anchor thingy , https://www.youtube.com/watch?v=B4Y9Ed4lLAI&t=657s , maybe i can translate this to trigger when hovered or something
Web Dev Simplified
YouTube
CSS Anchor Is The Best New CSS Feature Since Flexbox
I cannot believe this is a feature coming to HTML/CSS. Anchoring elements used to be only something you could do with hundreds of lines of complex JavaScript code, but now it can be done with a single line of CSS. I am incredibly excited for this feature to be production ready as it has the potential to massively change web development. 📚 Mate...
MarkBoots
MarkBoots•7mo ago
css anchor is still experimental and behind flags. not usable for production
clevermissfox
clevermissfox•7mo ago
I can’t wait for anchor to be ready to use!!!! It’s gonna be an awesome property . But browser support is not there yet . Damn Safari!!!
Want results from more Discord servers?
Add your server
More Posts
Is this Possible by Clip-paths and is it possible to animate Clip-paths ?Hello everyone, can anyone help me with a design and animation question? I'm wondering what the bestmousemove eventsHi everyone I'm a beginner with javascript I 'm learning mousemove events I have this code ```htfont-size discrepancy using remHey guys I am doing a project and I am new to front-end. Doing so, I found something which I cant unUnable to change SVG icons color in reactI have downloaded svg files and added fill = "currentColor" to each individual . THen i created a fiSECURING CSS CODEHow to secure and protect the css code from "source code"? Like when you click the stylesheets fileHow do I import swiper.js package from node_modules into my main js.file?Hey guys, So I downloaded the swiper.js packackge via npm and did exactly what the doc says but it Is there a website or a repository in which we can see when CSS features were added?Sometimes I'll be looking up a feature on CanIUse or developer.mozilla.org to check its compatibilitDate Input field for birthday, 'masking' the user input, incorporating 'show' buttonI'm trying to create a birthday date input field inside of a React-bootstrap 'Form'. What I want iHow to horizontally center an element with translated content outside of it's widthI have a heading h3: ```html <h3>This is the width <span>extend</span></h3> ``` ```css h3 { widthIssue with Vite projectHello everyone, I'm having an issue with the Vite project. The issue is when I run the command npm r