WebListbox Design Hacks

Jon_Ogden · March 17, 2021, 1:38pm

And further, it appears you cannot make the background transparent even though you set the background color transparent

This:

.XojoListBox .dataTables_wrapper tr.buffer {
  background-color: rgba(255, 255, 255, 0) !important;
}

Gives the exact same result as this:

.XojoListBox .dataTables_wrapper tr.buffer {
  background-color: rgba(255, 255, 255, 1) !important;
}

I have a background image with texture to it that I want to show through the listbox. Apparently, Xojo in all their infinite wisdom says, “No. We don’t want you to do that. We insist that a listbox look ike a spreadsheet.”

DerkJ · March 17, 2021, 1:46pm

Does this work:

.XojoListBox .dataTables_wrapper tr.buffer {
  background-color: transparent !important;
}

or try to add:

opacity: 0.0;

Jon_Ogden · March 17, 2021, 1:54pm

Nope and Nope.

White background.

Xojo is insisting that a listbox look a certain way. You can’t add a style to it, you can’t do anything.

Jon_Ogden · March 17, 2021, 1:59pm

At this point, I think it might be easier for me to put a canvas on the page and draw my text there. I can specify exactly where to put it, the color, size, etc.

Hopefully the canvas is a bit more flexible than the listbox.

DerkJ · March 17, 2021, 2:07pm

So why is it exactly that you are not using WebStyle and WebListboxStyleRenderer ?
I noticed on testing that xojo is resetting the “hacked” styling (in css) back to the original.

It may work better if you comply with the xojo functionality.
To set a webstyle make a new instance and assing it to the control
For webListboxStyleRenderer refer to this:
https://documentation.xojo.com/api/user_interface/web/weblistbox.htmlStyleRenderer

Jon_Ogden · March 17, 2021, 2:22pm

Try putting this in the opening event of a Listbox and see what it gets you:

me.style.BackgroundColor = &c00BDFF00
me.Style.BorderThickness = 0
me.Style.BorderColor = &cFFFFFFFF

The style property of a listbox is protected.

And supposedly Xojo functionality is built around the Bootstrap CSS file except for list boxes. Everyone has told me the “proper” way to do things is through CSS.

And the listbox style renderer is for changing styles on cells not the entire listbox.

DerkJ · March 17, 2021, 2:27pm

You didn’t re-assinged the class instance, but i do see that’s not even possible also since:
“This method is protected. It can only be called from with it’s class”
me.Style = New WebStyle
me.style.BackgroundColor

All give the same error…
Probably a bug. @Greg_O_Lone ? or by design?

Even if subclasses you cannot override the Style() As WebStyle and Style(Assings value As WebStyle) functions… definately a bug…

Jeannot_Muller · March 17, 2021, 2:29pm

It seems to me that Xojo is using https://datatables.net internally. All I can say for sure is that every project has its own “table CSS”. I never dived into this too deeply, as you could anyways only override it with CSS injections and I think there is probably a reason why Xojo is not including it into the bootstrap theme or doesn’t allow us to upload (like with the bootstrap theme). an own css. So I never touched it yet, no way or the other . @DerkJ and that might be the reason, why we currently can’t even override it via own styles … But all speculations only, but the reason for me to not yet touching it.

Anthony_G_Cyphers · March 17, 2021, 2:43pm

The CSS overrides I provided here worked fine in my test project, to include adding new rows. I no longer have a test project for this.

Jon_Ogden · March 17, 2021, 2:56pm

I haven’t tried it in the header yet. But that still doesn’t alter the fact that I can’t make the listbox transparent. That’s a new requirement because I thought the guy doing the graphics for the background of this project was going to give me a solid color that I would just match. It’s patterned instead.

But I think you are right - it has to go in the HTML header of the page.

Anthony_G_Cyphers · March 17, 2021, 3:04pm

Updated for what should be complete transparency:

<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 {
	  border: 0 !important;
	}
	.dataTables_wrapper.no-footer .dataTables_scrollBody {
		background: none !important;
	}
</style>

Anthony_G_Cyphers · March 17, 2021, 3:06pm

If you don’t want to use the CSS overrides in the header, you’d have to execute your JavaScript to update the individual classes on elements after each change, which would be a PITA.

The downside to doing this in the App.HTMLHeader (or an additional CSS file) is that every single ListBox in your Web Application will be modified according to these rules, not just a single targeted one.

Jon_Ogden · March 17, 2021, 3:14pm

Thanks. But if you had a CSS file it would also affect every listbox. So header or CSS it seems like the change is universal.

I only have one listbox. I’ll try this. Thank you.

Jon_Ogden · March 17, 2021, 3:18pm

That works but with one small issue. There’s still a border showing at the bottom…Otherwise, it is exactly what I want…

Anthony_G_Cyphers · March 17, 2021, 3:21pm

<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;
	}
</style>

Jon_Ogden · March 17, 2021, 3:23pm

Excellent! Thank you. I’ve been killing myself trying to figure out how to get rid of that. I didn’t want to bother you.

Now just to get my font colors and sizes changed. I will try to do that myself before asking you guys for more help!

Ezekiel_Burke · March 17, 2021, 3:37pm

@Anthony_G_Cyphers Every time I go to type you’ve already beat me.

To add on to Anthony’s CSS you can hide all scrollbars like this:

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

Just add it to the bottom of Anthony’s CSS.

In case your schedule data is bigger than the listbox.

Jeannot_Muller · March 17, 2021, 3:53pm

I think, there will be a very happy Jon sitting on the couch tonight, and a Jon who learned a lot of CSS in the past few hours

Jon_Ogden · March 17, 2021, 3:53pm

Cool. Thanks. I’ll keep that in mind if I need it. This is for a signage application where a Digital Signage player will display the generated page from the web app and display it on a TV screen. It’s to display a schedule of events at the facility. I may need to scroll the listbox via a timer if there’s a lot of events. So far that hasn’t been an issue - I think I should be able to get all the events on in one screen but who knows…

I did figure out how to change the text color and size. So that’s working too!

Ezekiel_Burke · March 17, 2021, 4:00pm

I am getting flashbacks. I’ve done something similar for a school once. The css I gave just hides the scrollbar. It’s still fully functioning.

I just really hate the default scrollbar. It’s usually one of the first things I change.

::-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);
}