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