Selected Element getting disappeared

[Miteshdv]

Hi ,
Whenever i try drag an element the element disappears and after drag finish the element appears.
Please help me. Component is excellent and perfect

Thanks

[Miteshdv]

Ok the issue is my Sortable component is inside react-boostrap Modal component.
The dragged component is behind the Popup,
Can you please help me

[clauderic]

You can add the helperClass prop to your enhanced SortableContainer component to style the helper and give it a higher z-index value.

For example:

render() {
 return (
   <SortableList helperClass='sortableHelper' />
  )
}

And then in your css:

.sortableHelper {
   z-index: 10;
}

[Miteshdv]

I did the same its not working :(

[clauderic]

You'll need to adjust the z-index to your specific use case. If in doubt, just try incrementing the value until it starts working (for instance, try z-index: 9999, or even higher)

[Miteshdv]

Hmm Thanks for reply , its still not working . i have one question , the dragged mini opaque element that appear . Is it part of SortableList ? or it is is also a some popup? . because i am suspicious that react-bootstrap popup is making it self at the highest z order. But i have no way to debug

[Miteshdv]

Ok This worked <SortableItem key={item-${index}} index={index} value={fieldName} style = {{zIndex: 100000}}/>
Can u please tell me why the above mentioned way worked and sortableHelper class on sortbale list didnt ?

[clauderic]

The above applies the style directly on the element, which then gets cloned and appended to the document.body element when you start sorting (this is the sortable helper).

The above mentioned solution instead adds a class of your choice to the helper at the moment when it is cloned.

Both should work, I'd need to see some code to diagnose why the first option isn't working for you.

[Miteshdv]

https://github.com/Miteshdv/Form-Creator/blob/master/formElementsReorder/FormReOrderView.jsx you can go to Miteshdv/form-creator on github download project npm install nd check it pls

[microdou]

@Miteshdv @clauderic I had the same problem with Popover in react-bootstrap. z-index has to be marked with !important to override bootstrap styles.

.sortableHelper {
   z-index: 10000 !important;
}

[Sachem]

@Miteshdv as this element that you drag is appended at the end of the BODY, make sure you don't put the definition of .sortableHelper in the scope of some other CSS class (like you probably do with the styles for the elements) as it will simply not work.

[Pyot]

For me, it works when I add to class to li tag:

const SortableItem = SortableElement(({value}) =>
  <li className="sortableHelper">{value}</li>
);

and CSS

.sortableHelper {
   z-index: 9999;
}

if a style of a draggable element does not satisfy you. Please make adjustment in .sortableHelper