search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.77k stars 3.7k forks source link

[bug]Selected and Hover colors not showing in Bootstrap #2399

Closed MarcPinnell closed 2 months ago

MarcPinnell commented 3 months ago

Describe the bug

Using multi-drag/select on a Bootstrap styled table. When clicking the rows the proper CSS style is applied to the code, but the screen doesn't show the new colors for the row.

To Reproduce If the table is set as: <table id="reorder-table" class=""> then the colors from the custom CSS work fine.

if the table is set as: <table id="reorder-table" class="table"> Then the custom CSS colors do not override the table row colors set by Bootstrap - even if the custom color definitions are: background-color: red !important;

Expected behavior Per the demos, when you click a row it should highlight

Information

sortablejs = 1.15.2 bootstrap = 5.3.3

owen-m1 commented 2 months ago

Would you be able to provide a JSBin reproduction please? This sounds more like a CSS issue than Sortable

owen-m1 commented 2 months ago

Okay I was able to reproduce this. It's bootstrap adding a bg color to the td elements themselves. Add this CSS:

.table>:not(caption)>*>* {
  background-color: transparent !important;
}

https://jsbin.com/zadenitoko/2/edit?html,css,js,output

MarcPinnell commented 2 months ago

Thanks for figuring it out. I ended up removing the bootstrap styling and adding my own to solve it. I will keep this for the future though!