-
Notifications
You must be signed in to change notification settings - Fork 983
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
Selected Element getting disappeared #87
Comments
Ok the issue is my Sortable component is inside react-boostrap Modal component. |
You can add the For example: render() {
return (
<SortableList helperClass='sortableHelper' />
)
} And then in your css: .sortableHelper {
z-index: 10;
} |
I did the same its not working :( |
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 |
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 |
Ok This worked <SortableItem key={ |
The above applies the style directly on the element, which then gets cloned and appended to the 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. |
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 |
@Miteshdv @clauderic I had the same problem with
|
@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. |
For me, it works when I add to class to li tag:
and CSS
if a style of a draggable element does not satisfy you. Please make adjustment in .sortableHelper |
Inside of a // file `ReorderThingsForm.styles.js`
import { makeStyles } from "@material-ui/core";
export const useStyles = makeStyles(
theme => ({
sorting: {
zIndex: theme.zIndex.modal + 100,
},
}),
{
classNamePrefix: "ReorderThingsForm",
},
); // file `ReorderThingsForm.jsx`
import ...;
import { useStyles } from "./ReorderThingsForm.styles";
const MySortableContainer = SortableContainer(...);
export function ReorderThingsForm() {
const classes = useStyles();
return (
<...>
<MySortableContainer
rows={rows}
helperClass={classes.sorting}
onSortEnd={onSortEnd}
/>
</...>
);
} |
#87 (comment) |
If you want to control the zIndex more dynamically: use updateBeforeSortStart event:
|
If anyone finds themselves using (maintaining a project with) react-select with react-sortable-hoc. My solution was to style the class for the multiValue item, as of now: .css-1rhbuit-multiValue {
z-index: 10;
} |
|
Hi , I have been trying to resolve it but i'm not able to . Could you please help me with this ? |
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
The text was updated successfully, but these errors were encountered: