Weblistbox colors

I have 2 weblistboxes on the screen, i need to be able to change the colours of the rows the hover, I can’t seem to find a way to do it, is this actually possible?

Do you want the same colors for all weblistboxes?
You can change the CSS by adding code in the App HTML Header.

Is not clear if you want to change only the hover color, you can add this to the App HTML Header:

<style>
.table-hover tbody tr:hover {
    background-color:  rgba(2,107,198,.375);
}
</style>

to get this:
ezgif.com-video-to-gif

I can do this ok, problem I have is i want to change colours of the rows the mouse over highlight (selection highlight xojo has option for and works ok)
App.HTMLHeader changes all the listbox’s I need different ones to have different colours.

Something like this?
ezgif.com-video-to-gif (1)

Add this to your App HTML Header:

<style>
.table-hover2 tbody tr:hover {
    background-color:  rgba(2,107,198,.375);
}
.table-hover3 tbody tr:hover {
    background-color:  rgba(123,10,18,.375);
}
</style>

Shown event for the left Weblistbox:

ExecuteJavaScript( "$('#" + me.ControlID + "').addClass('table-hover2');")

Shown event for the right Weblistbox:

ExecuteJavaScript( "$('#" + me.ControlID + "').addClass('table-hover3');")

It may work in the Opening event.

Edit: I have not tested this in a production web application. I’m not sure if Xojo removes the class in some situations, if so, you will need to add the class again after those situations.

2 Likes

That seems to work great, is there a way to change the colour of the back of the rows, it has white and grey alternating lines, i need them black with white text, i guess i need to change the header colours too. Then I can make this list a dark theme?

Is there a list of the class names that xojo uses for all their web components?

Using Chrome Developer Tools you can inspect an element and see all the related CSS. You can find datatables, bootstrap and Xojo CSS there.

Xojo CSS
/* Xojo.css

   Global CSS Framework customizations

   Š2022 Xojo Inc -- All Rights Reserved */
/* Contextual Menus */
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#343a40;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:active>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}
.dropdown-menu>li.disabled {
		opacity: 0.35;
}

.dropdown-item a {
	text-decoration: none;
}

.dropdown-item .disabled {
	opacity: 0.3;
}

.pill-group>.pill {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.pill-group .pillbox-add-item {
	height: 22px;
	font-size: 12px;
}

.XojoRadioGroup:focus {
	outline: none;
} 

.XojoVideoPlayer video {
	outline: none;
}

/* Move the caret off to the right */
.XojoPopupMenu .dropdown-toggle::after {
	margin-right: -100%;
}

table.dataTable {
    margin: 0 !important;
}

table.dataTable thead td {
	border-bottom: 1px solid #dddddd; 
}
    
table.dataTable tfoot td {
	border-top: 1px solid #dddddd; 
}
    
table.dataTable.no-footer {
	border-bottom: 1px solid #dddddd; 
}

table.dataTable td, table.dataTable th {
    box-sizing: border-box;
}

table.dataTable thead.table-dummy-head {
    position: absolute;
    top: -1000px;
    opacity: 0;
}

.dataTables_scroll .dataTables_scrollHeadInner {
    background-color: #fafafa;
    box-shadow: inset 1px 0 0 2px #dee2e6;
}

.dataTables_scroll .dataTables_scrollHeadInner th {
    background-color: white;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
	border-bottom: 1px solid #dddddd; 
}

.custom-control-inline:last-child {
	margin-right: 0px;
}

/* Hide the scrolling label */
.XojoListBox div.dts_label {
	display: none !important;
}

/* Listbox Sorting Highlights */
.XojoListBox .sorting_1 {
	background-color: rgba(0,0,0,0.05);
}

.XojoListBox .sorting_1 {
	background-color: rgba(0,0,0,0.033334);
}

.XojoListBox .sorting_3 {
	background-color: rgba(0,0,0,0.0166667);
}

.XojoListBox tbody td {
	-webkit-user-select:none; 
	-moz-user-select:none; 
	-ms-user-select:none;
	user-select: none;
}

.XojoListBox tbody tr.buffer td {
	padding: 0px;
}

/* Toolbar */
@media (min-width: 768px) {
    .nav-item.xojo-toolbar-flexible-space {
        margin-left: auto;
    }
}

/* DatePicker */
.datepicker .datepicker-days .disabled.day {
    cursor: not-allowed;
}

.datepicker .datepicker-days .old.day,
.datepicker .datepicker-days .new.day {
    visibility: hidden;
}

Hope this helps.

can I use this info anyway so that in an open event of a listbox I can change all its colour attributes? or do I need to use app.htmlheader, which I think is messy as code is all over the place not in the listbox itself since each listbox maybe a different colour.
I am just trying to get a dark themed listbox?

I tried this, then I noticed when a timer fired on another page the listbox would flash white which is odd.