WebListbox Design Hacks

Anthony_G_Cyphers · April 11, 2024, 2:25pm

Fixed for consistent results in light/dark based on theme:

<style>
.table>:not(caption)>*>* {
  background: transparent !important;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))) !important;
}
.XojoListBox table.dataTable.table-dark.table-striped>tbody>tr.odd>*,
.XojoListBox table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: none !important;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))) !important;
}
.XojoListBox {
    border: none !important;
}
</style>

This will use the table colors defined in your Bootstrap 5.x compatible theme for the table text.

Jon_Ogden · April 11, 2024, 2:32pm

OK. So I added this - thank you! And now I don’t get the alternating rows, but all my text is black.

This is what I have in the app.htmlheaders property. Do I have something wrong? Also, do I need to utilize the WebListBoxStyleRenderer method with this CSS code in place?

<style>
	.XojoListBox .DTFC_ScrollWrapper,
	.XojoListBox .table,
	.XojoListBox .dataTables_wrapper tr.buffer,
    .table-striped tbody tr:nth-of-type(odd) {
	  background-color: transparent !important;
	}
	table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
	    content: "" !important;
	}

	table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
	    content: "" !important;
	}
	.table-bordered,
	.table-bordered thead td, .table-bordered thead th,
	.table-bordered td, .table-bordered th,
	.dataTables_wrapper.no-footer .dataTables_scrollBody {
	  border: 0 !important;
	}
	.dataTables_wrapper.no-footer .dataTables_scrollBody {
		background: none !important;
	}
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	background: rgba(73, 162, 98);
}

body {
  color: white;
}
.table>:not(caption)>*>* {
  background: transparent !important;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))) !important;
}
.XojoListBox table.dataTable.table-dark.table-striped>tbody>tr.odd>*,
.XojoListBox table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: none !important;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))) !important;
}
.XojoListBox {
    border: none !important;
}
</style>

Anthony_G_Cyphers · April 11, 2024, 2:33pm

You’re seeing black text, presumably, because you’re in light mode and that’s the color that the Bootstrap theme in use has defined for table cell text color. If you switch to dark mode, you’ll likely see it turn white. Is your end goal to make the text white always?

If so, use this:

<style>
.table>:not(caption)>*>* {
  background: transparent !important;
  color: white !important;
}
.XojoListBox table.dataTable.table-dark.table-striped>tbody>tr.odd>*,
.XojoListBox table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: none !important;
    color: white !important;
}
.XojoListBox {
    border: none !important;
}
</style>

Jon_Ogden · April 11, 2024, 2:47pm

Yes, the text will always have a blue-ish picture in the background. It needs to be white always. The particular browser/platform used is a digital signage system and there is no dark mode.

Anthony_G_Cyphers · April 11, 2024, 2:48pm

Then my last reply should have you all squared away.

AlbertoD · April 11, 2024, 2:53pm

Then change the Xojo setting to not allow Dark Mode.

Anthony_G_Cyphers · April 11, 2024, 2:54pm

If the target system doesn’t support it, this will only have an effect on the development machine.

Jon_Ogden · April 11, 2024, 4:31pm

Disabling Dark Mode still results in black text.

I need white text.

Jon_Ogden · April 11, 2024, 4:33pm

Well, not quite. Now I get this:

Do I not have the CSS code in the correct order? It’s getting to be quite long…

Anthony_G_Cyphers · April 11, 2024, 4:34pm

What is your full App.HTMLHeader?

Anthony_G_Cyphers · April 11, 2024, 4:42pm

I’m not providing you with additions, the code I’m creating for these changes is modifications. If you’re just pasting in every bit of CSS I’ve posted here, it’s not going to work. Start with your base from the example project, then add the CSS from this post:

Jon_Ogden · April 11, 2024, 4:54pm

OK. I found a couple of errors in the CSS in the HTMLHeader property. I fixed those and it looks like it’s correct now! Yay!

Here’s the full CSS:

<style>
	.XojoListBox .DTFC_ScrollWrapper,
	.XojoListBox .table,
	.XojoListBox .dataTables_wrapper tr.buffer,
    .table-striped tbody tr:nth-of-type(odd) {
	  background-color: transparent !important;
	}
	table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
	    content: "" !important;
	}

	table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
	    content: "" !important;
	}
	.table-bordered,
	.table-bordered thead td, .table-bordered thead th,
	.table-bordered td, .table-bordered th,
	.dataTables_wrapper.no-footer .dataTables_scrollBody {
	  border: 0 !important;
	}
	.dataTables_wrapper.no-footer .dataTables_scrollBody {
		background: none !important;
	}
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	background: rgba(73, 162, 98);
}

body {
  color: white;
}
.table>:not(caption)>*>* {
  background: transparent !important;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))) !important;
}
.XojoListBox table.dataTable.table-dark.table-striped>tbody>tr.odd>*,
.XojoListBox table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: none !important;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))) !important;
}
.XojoListBox {
    border: none !important;
}

.table>:not(caption)>*>* {
  background: transparent !important;
  color: white !important;
}
.XojoListBox table.dataTable.table-dark.table-striped>tbody>tr.odd>*,
.XojoListBox table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: none !important;
    color: white !important;
}
.XojoListBox {
    border: none !important;
}
</style>

Anthony_G_Cyphers · April 11, 2024, 4:56pm

You still have duplicate conflicting definitions.

It should be this:

<style>
	.XojoListBox .DTFC_ScrollWrapper,
	.XojoListBox .table,
	.XojoListBox .dataTables_wrapper tr.buffer,
    .table-striped tbody tr:nth-of-type(odd) {
	  background-color: transparent !important;
	}
	table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
	    content: "" !important;
	}

	table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
	    content: "" !important;
	}
	.table-bordered,
	.table-bordered thead td, .table-bordered thead th,
	.table-bordered td, .table-bordered th,
	.dataTables_wrapper.no-footer .dataTables_scrollBody {
	  border: 0 !important;
	}
	.dataTables_wrapper.no-footer .dataTables_scrollBody {
		background: none !important;
	}
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	background: rgba(73, 162, 98);
}

body {
  color: white;
}
</style>

<style>
.table>:not(caption)>*>* {
  background: transparent !important;
  color: white !important;
}
.XojoListBox table.dataTable.table-dark.table-striped>tbody>tr.odd>*,
.XojoListBox table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: none !important;
    color: white !important;
}
.XojoListBox {
    border: none !important;
}
</style>

Jon_Ogden · April 11, 2024, 5:24pm

Thanks! Looking good so far. Now to get it all put together…

Thanks for the assist!