search

kutlugsahin / smooth-dnd

drag and drop library for javascript
MIT License
598 stars 146 forks source link

zIndex 1000 - items not visible #86

Open nbelyh-visualstrategy opened 3 years ago

nbelyh-visualstrategy commented 3 years ago

In my current application (using fluentui library), the zindex is 100000 (sidebar) The smooth-dnd library sets it to 1000 (seems to be hardcoded), and therefore the dragged item becomes invisible. Is it possible to change this value?

https://github.com/kutlugsahin/smooth-dnd/blob/e32fcc767e34d57f437218ebbd8482ee37b6f632/src/mediator.ts#L89-L91

nbelyh-visualstrategy commented 3 years ago

Need more investigation, maybe not actually the case

nbelyh-visualstrategy commented 3 years ago

The issue seems to exist anyways. Would be great to be able to specify zIndex (can be required also for some other third-party libraries, not only fluentUI). Check out similar issue (bootstrap modal, material ui): https://github.com/clauderic/react-sortable-hoc/issues/87

Mylogo commented 3 years ago

Had the exact same issue today. My workaround was to use CSS as every draggable has the class smooth-dnd-ghost. So in your CSS, just add:

.smooth-dnd-ghost {
  z-index: 999999 !important;
}

Doesn't feel nice, but did the trick for me.