Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling first-child doesn't work if you drag the first element. #1214

Closed
phiter opened this issue Nov 7, 2017 · 2 comments
Closed

Styling first-child doesn't work if you drag the first element. #1214

phiter opened this issue Nov 7, 2017 · 2 comments

Comments

@phiter
Copy link

phiter commented Nov 7, 2017

Hi.

I have a list of items that I want to sort, and I need the first element to be wider than all 3 others.

In order to do this, I have the following css:

#produto_img {
  display: flex;
  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;
}

It works fine when I start dragging any item after the first, even if I switch with the first item it works fine.

It creates the following markup:

image

But when I start dragging from the first, I'll lose the styling because the plugin creates another item on its place and sets it to display: none, so the :first-child selector won't work anymore, and it loses the styling.

image

This gif shows what's happening:

gg

Any workaround on this? Perhaps not creating the element with display: none in an option or something?

If this doesn't fit here, I'll try to ask on Stack Overflow.

@phiter
Copy link
Author

phiter commented Nov 7, 2017

I fixed the issue with help from a guy at Stack Overflow.

I had to add two more lines to the plugin:

cloneClass: 'sortable-clone', @ line 263 (after chosenClass option)

_toggleClass(cloneEl, _this.options.cloneClass, true); @ line 665 (after _toggleClass(cloneEl, _this.options.chosenClass, false);)

With this option, I managed to skip the hidden element using the following modified css:

#produto_img {
  display: flex;
  flex-wrap: wrap;
}

#produto_img > li {
  width: 100%;
  height: 200px;
  margin: 0 5px 10px;
}

#produto_img > li:not(.sortable-clone) ~ li {
  flex: 1;
  height: 100px;
}

It'd be nice if you guys could add this to the plugin.

Thanks!

@owen-m1
Copy link
Member

owen-m1 commented Jan 15, 2019

Solved in 1.8.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants