Styling Nested Sort
Nested Sort is not opinionated when it comes to styling. The only CSS
code which comes as a part of it is a bit of inline styling generated by
the JS code. However, you can utilise the
listClassNames
and
listItemClassNames
properties of the Config object to style
the generated list element however you want.
Bootstrap
As an example, if you're using Bootstrap v4, the following code would make your Nested Sort lists look Bootstrapy:
new NestedSort({
data: [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
{ id: 3, text: "Item 3" }
],
el: '#nested-sort-wrap',
listClassNames: 'list-group', // a Bootstrap specific class name for list elements
listItemClassNames: 'list-group-item' // a Bootstrap specific class name for list item elements
})
Custom styling
We have used the following CSS code for all the examples of Nested Sort in this documentation:
/* nested-sort is the custom class name */
.nested-sort {
padding: 0;
}
.nested-sort--enabled li {
cursor: move;
}
.nested-sort li {
list-style: none;
margin: 0 0 5px;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}
.nested-sort li ol {
padding: 0;
margin-top: 10px;
margin-bottom: -5px;
}
/* ns-dragged is the class name of the item which is being dragged */
.nested-sort .ns-dragged {
border: 1px solid red;
}
/* ns-targeted is the class name of the item on which the dragged item is hovering */
.nested-sort .ns-targeted {
border: 1px solid green;
}