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;
}