columnControl Blank entries

ordco_pete

Link to test case:

Vanilla: https://live.datatables.net/seyufanu/1/edit
BS5: https://live.datatables.net/kivigedo/1/edit

Error messages shown: No error

Description of problem:

Hi, I searched but I have not seen anyone reporting this on the new columnControl extension.

This is a really minor issue.

Using Bootstrap 5 the blank option (Position Tiger Nixon in demos above) in search list is very small (few pixels high) at the top of the list. It was difficult to locate and different from searchBuilder - which seems to give that option a full row height. In bootstrap this is made a little more difficult by there being no contrast when moving the mouse over the searchlist or its not discernible on my monitor.

I included a vanilla example as this does have contrast on mouse so you can find it more easily but its still not the right height for users to be aware its even an option.

Please let me know if you need more info

thanks again for this awesome extension, and the global clear button which i just found after being unable to see where i had set a very restrictive filter...

pete

allan

Hi Pete,

Here is one possible way to address it:

.dtcc-button-text:empty::after {
  content: '.';
  display: block;
  opacity: 0;
}

https://live.datatables.net/kivigedo/2/edit

I'm not sure if I prefer that, assigning a min-height (which is tricky to get the line height right), or providing an option for a language string when there is empty text ("Empty" for example).

Any thoughts?

Allan

ordco_pete

Hi Allan

Thank you for the update, for me that works great, its similar to SearchBuilder interface, maybe from a users perspective the 'Empty' option would be more intuitive and flexible if its not to hard to implement.

Any chance a contrast could be added on the BS5 searchlist mouse hover like below but done by someone who knows what they are doing?

.dtcc-button-text:hover {
  background-color:#E5E4E296;
}
[data-bs-theme=dark] .dtcc-button-text:hover {
  background-color:#f3f4f92e
}

https://live.datatables.net/kivigedo/4/edit

Thanks for fix is working great here

pete

allan

I've gone with adding a new option. The language.columnControl option will have a list.empty option as of version 1.0.4, with the default being "Empty". That will show in place of an empty string label. The button will also have the class dtcc-button_empty for styling.

The commit for this is here.

Regarding the hover state - you could set the background colour with the CSS variable --bs-dropdown-link-hover-color. It does actually use that already - the trouble is that the background for the list uses --bs-tertiary-bg-rgb and they happen to be basically the same!

What I've done is to commit a change that makes the background colour --bs-secondary-bg-rgb which work. It is lighter than I would like, but I'm not sure I see much choice!

Allan