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.
19 Replies
MarkBoots
MarkBoots8mo 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
MarkBoots
MarkBoots8mo ago
No description
conmeomaunau
conmeomaunau8mo ago
thank you , i will trry
MarkBoots
MarkBoots8mo ago
you will probably need to recalculate the positions on the clickevent
conmeomaunau
conmeomaunau8mo ago
i think get position of element when event size , when click question 5 again then draw line
MarkBoots
MarkBoots8mo 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
conmeomaunau
conmeomaunau8mo ago
thank you so much i have solved it @MarkBoots can you help me one more problem
conmeomaunau
conmeomaunau8mo ago
No description
conmeomaunau
conmeomaunau8mo ago
i want it to match but it can't match
conmeomaunau
conmeomaunau8mo ago
No description
MarkBoots
MarkBoots8mo 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)
MarkBoots
MarkBoots8mo 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)
conmeomaunau
conmeomaunau8mo ago
thank you so much
MarkBoots
MarkBoots8mo ago
no problem
conmeomaunau
conmeomaunau8mo ago
@MarkBoots can you help me
conmeomaunau
conmeomaunau8mo ago
No description
conmeomaunau
conmeomaunau8mo 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
MarkBoots
MarkBoots8mo ago
i'll have to see what you have so far. make a code pen with only this example. html + css
conmeomaunau
conmeomaunau8mo 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