WebListBox: get rid of grey row mouse-over (hover style)

Targets Web
1

I’m trying to create a WebListBox where the user can select a single cell containing an image. For that I want to get rid of the mouse-over hover on table-row level. Does anybody have an idea how to do this?

I tried a lot but nothing works. Funny thing is that I can change the color of the hover row with css, for example to a red or blue background-color, but if I set background-color to white or transparent the hover row color remains grey.

Any help is appreciated. Thanks!

2

Try this in your App HTMLHeader code:

<style>
.XojoListBox table.dataTable.table-hover > tbody > tr:hover > * { box-shadow: none!important; }
</style>
3

Thanks, that is working but I have also to remove the alternate row color, otherwise this row is changing it’s color on mouse-over.

But in the meantime I figured out that the easiest way is to remove the datatables css class “table-hover” from the table element. This eliminates the mouse-over without any custom css.

I’m now executing the below JavaScript in the Shown() event of the Listbox (Self.ExecuteJavaScript(…)).

var table = document.getElementById("#CRTLID#_table");
table.classList.remove("table-hover");

Many thanks!

2 Likes