Find new positions of elements

Please watch the following video, in question 5 when I connect the answers together they are following what I want but when I submit it appears a div tag above causing the line connecting the answers to be in the wrong position. I want to ask for a solution. Thank you everyone so much.
M
MarkBoots41d ago
i think the lines are positioned absolute? if you have a container around those answers, position the lines relative to that container. that way if something shifts above it, they wont be affected
M
MarkBoots41d ago
No description
C
conmeomaunau41d ago
thank you , i will trry
M
MarkBoots41d ago
you will probably need to recalculate the positions on the clickevent
C
conmeomaunau41d ago
i think get position of element when event size , when click question 5 again then draw line
M
MarkBoots41d ago
if you click an element, you can get the elm.offsetTop and elm.offsetLeft position to get its position relative to the parent container. you can use those values for the calculation of the line position then you only have to do it once, doesnt matter what changes outside of it
C
conmeomaunau41d ago
thank you so much i have solved it @MarkBoots can you help me one more problem
C
conmeomaunau41d ago
No description
C
conmeomaunau41d ago
i want it to match but it can't match
C
conmeomaunau41d ago
No description
M
MarkBoots41d ago
is there a border or padding on the parent? you'll have to acount for that is you use position absolute. (it is relative to the content box)
M
MarkBoots41d ago
you could do it like this (there are many other ways, like clippaths, masks or bg gradients, but this is about the same how you did it) https://codepen.io/MarkBoots/pen/PogPOjQ?editors=1101 (slider is just for demo)
C
conmeomaunau41d ago
thank you so much
M
MarkBoots41d ago
no problem
C
conmeomaunau40d ago
@MarkBoots can you help me
C
conmeomaunau40d ago
No description
C
conmeomaunau40d ago
I want to add a border to the image on the right, but I don't know how to do it with an arc shape
M
MarkBoots40d ago
i'll have to see what you have so far. make a code pen with only this example. html + css
C
conmeomaunau40d ago
.project-tasks-answers { width: 100%; flex-wrap: wrap; margin-top: 1.5rem; .project-tasks-answers-answer { position: relative; cursor: move; background-color: var(--white); padding: 1.2rem; /* border-radius: 0.8rem; */ width: calc(50% - 1rem); margin: 0 0 1.5rem; position: relative; box-shadow: rgba(99, 99, 99, 0.2) 0rem 0.2rem 0.8rem 0rem; /* border: 0.1rem solid black !important; */ display: flex; align-items: center; justify-content: center; height: 10rem; &:hover { box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px; border: 0.3rem dashed var(--light-grey) !important; } .project-tasks-answers-answer-misPiece { width: 1.4rem; height: 1.4rem; position: absolute; top: 50%; right: -0.8rem; transform: translate(0, -50%); background-color: var(--bg); border-radius: 3rem; } .project-tasks-answers-answer-enouPiece { width: 1.4rem; height: 1.4rem; position: absolute; top: 50%; left: -0.8rem; transform: translate(0, -50%); background-color: var(--white); border-radius: 3rem; } }
Want results from more Discord servers?
Add your server
More Posts
Position Sticky stops working, after I set a sibling element to Position Absolute```html <header> <div class="logo"></div> <div class="header__links"></div> <nav class="nav"><question regarding "key" in jsIk this might seem a lil dumb but can someone explain to me why we use "key" in js or react as wellEven/odd row styling with CSS Grid and subgrid, is this a good idea?For work, I needed some table styling and decided to use CSS Grid. Because I need even/odd row stylihow to prevent last item of flex to grow```css section {display:flex; flex-wrap:wrap; gap:1rem} div {background-color:red; width:0; min-widtResponsive IdeasHello there! Thank you in advance for your help. I've been working on a Weather API that I need to fIssue in starting sassFirst off, i have exisiting .css file doing some mini project of mine then i encountered limitation Button coloring with a imaged backgroundIt's proving quite difficult to find the right color to make this not look out of place/tacky.. I tHelp me, help you, by helping me, so I don't ask so many questions(yep?)Here's the site: https://anglian-online.netlify.app/ Here's the code: https://github.com/callum-lainFor some reason the post value isn't being shown even tho in var_dump it shows that it's there.You can see that the `$_POST["ajaxMonth"]` has a string value of "2" in the first image however whenResponsive Carousel (TailWind + JS)Hello, I'm trying to build a responsive carousel. Ideally, what I'd like to happen is that the amouWebpage CSS to make it be better on varying display size (responsive)tell me where to start how to fix this , where to study this ,on varying display somethings get stacIs my site layout saveable?Two years ago I made a custom layout for my website. At a small scale it worked perfectly (only one simulating support for missing web apis?Is there a way to simulate *the lack of support* for web apis in Firefox or Chrome? Like for exampleGoogle search result name changeChanged the domain name recently from infotelligent to selling.com. I have changed the all the titlePGJDBC IssueHello, I'm trying to setup PostgreSQL JDBC Driver with my Java project. I'm not using Maven, don't If anyone can help and look at my Html & CSSI'm trying this challenge and just wanted some help on my code and what I can improve on and avoid. Applying multiple classes, or targetting a google font class in NextJSAnyone know how to do this? I've got the font working on my h1, but I don't know how to target it. <dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog``` dialog { position: fixed; border: none; border-radius: 5px; box-shadow: var(--niHow to create a pointy triangle border?The border of the social media icons. HTML: <div class="social1"> <span>SHARE</span> aria-current or aria-selected ?Should I use aria-current or aria-selected on the active profile subcategory (currently SKILLS) ?