I've encountered an issue while using Sortable.js. The problem is as follows:
I have a list of items that need to be sorted, with the first element wider than the rest.
To achieve this, I've applied the following CSS:
#produto_img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#produto_img > li {
height: 100px;
margin: 0 5px;
}
#produto_img > li:not(:first-child) {
flex: 1;
}
#produto_img > li:first-child {
width: 100%;
height: 200px;
margin-bottom: 10px;
}
Everything works perfectly when dragging any item except for the first one. Even if I switch positions with the first item, it still works smoothly.
The resulting markup looks like this:
https://i.sstatic.net/7GTtn.png
However, when I try dragging the first item, the styling gets messed up because the plugin adds another item in its place and hides it with display: none. As a result, the :first-child selector no longer applies, causing the loss of styling.
https://i.sstatic.net/nbejb.png
Check out this gif to see the issue in action.
https://i.sstatic.net/xwRwQ.gif
My initial thought was to somehow avoid styling the first element if it's hidden with display: none, or use something like :first-child:visible. However, these solutions aren't working. Any suggestions for a workaround?