react-smooth-dnd
react-smooth-dnd copied to clipboard
does not work with fireblade css (even after removing the random fireblade names)
Hi there,
I have a bunch of elements exported from Fireblade, and while I've managed to change it enough that I can drag individual elements that I want, they don't rearrange positions -- they look like they're about to switch, and when I drop any element, it sinks to the new spot as if it's about to accept the switch -- BUT then all the elements rearrange themselves back to their original position.
Is there certain css that will interfere with the functionality of this plugin?
Here is one sample of what the css looks like for one of the elements, I've edited a lot of this down, but it seems to make no difference -- elements start to rearrange themselves when I drag, but reset to their original position when I drop. What could cause that?
`.quizstackquestion1 .stack .item1container {
display: block;
position: absolute;
-ms-transform: rotate(0.00deg);
-webkit-transform: rotate(0.00deg);
transform: rotate(0.00deg);
-ms-transform-origin: center;
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
cursor: default;
margin-top: 0.00px;
margin-right: 0.00px;
margin-bottom: 0.00px;
margin-left: 0.00px;
padding-top: 0.00px;
padding-right: 0.00px;
padding-bottom: 0.00px;
padding-left: 0.00px;
overflow-x: unset;
overflow-y: unset;
background-color: transparent;
width: 231.00px;
height: 44.00px;
left: 0.00px;
top: 0.00px;
}
.quizstackquestion1 .stack .item1container .btnshape {
display: block;
position: absolute;
box-sizing: content-box;
-ms-transform: rotate(0.00deg);
-webkit-transform: rotate(0.00deg);
transform: rotate(0.00deg);
-ms-transform-origin: center;
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
cursor: default;
margin-top: 0.00px;
margin-right: 0.00px;
margin-bottom: 0.00px;
margin-left: 0.00px;
padding-top: 0.00px;
padding-right: 0.00px;
padding-bottom: 0.00px;
padding-left: 0.00px;
overflow-x: unset;
overflow-y: unset;
background-color: transparent;
width: 231.00px;
height: 44.00px;
left: 0.00px;
top: 0.00px;
}
.quizstackquestion1 .stack .item1container .btnshape .rectangle { position: absolute; box-sizing: border-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; opacity: 1; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; background-color: transparent; border-bottom-color: rgba(255, 255, 255, 1); border-bottom-style: solid; border-bottom-width: 2.00px; border-left-color: rgba(255, 255, 255, 1); border-left-style: solid; border-left-width: 2.00px; border-right-color: rgba(255, 255, 255, 1); border-right-style: solid; border-right-width: 2.00px; border-top-color: rgba(255, 255, 255, 1); border-top-style: solid; border-top-width: 2.00px; border-top-left-radius: 15.00px; border-top-right-radius: 15.00px; border-bottom-left-radius: 15.00px; border-bottom-right-radius: 15.00px; box-shadow: none; width: 231.00px; height: 44.00px; left: 0.00px; top: 0.00px;
}
.quizstackquestion1 .stack .item1container .item1 { position: absolute; box-sizing: content-box; -ms-transform: rotate(0.00deg); -webkit-transform: rotate(0.00deg); transform: rotate(0.00deg); -ms-transform-origin: center; -webkit-transform-origin: center; transform-origin: center; opacity: 1; cursor: default; margin-top: 0.00px; margin-right: 0.00px; margin-bottom: 0.00px; margin-left: 0.00px; padding-top: 0.00px; padding-right: 0.00px; padding-bottom: 0.00px; padding-left: 0.00px; background-color: rgba(255, 255, 255, 0); text-align: center; letter-spacing: 0.00px; color: rgba(255, 255, 255, 1); -webkit-text-stroke: 1.00px rgba(0, 0, 0, 0); font-size: 18.00px; font-weight: 700; font-style: normal; font-family: poppins_semibold, Arial; text-decoration: none; box-shadow: none; overflow-x: unset; overflow-y: unset; width: 192.00px; height: 33.00px; left: 21.00px; top: 8.00px;
}`