WebListbox Design Hacks

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.

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

1 Like

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.

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…
1 Like

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 :wink: . @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.

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.

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.

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>
1 Like

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.

1 Like

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.

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

<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>
3 Likes

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! :smiley:

1 Like

@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.

1 Like

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 :slight_smile:

1 Like

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!

1 Like

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);
}
2 Likes

In case you need it, could be easily modified to the WebListBox:

3 Likes

These are so much fun! I just discovered that using:

me.ColumnWidths

in the Opening event doesn’t work. But if you set ColumnWidths in the field in the IDE - that does work.

And I tell you I’m like susprised at how poorly things are operating in Web 2.

I have tried to scale my background image and draw it in a canvas. It never draws. I then tried to put it in an WebImageViewer but that has a static image and doesn’t resize as the viewer is resized. So then in the resized event of the window, I tried drawing a picture in a picture object with the proper size of the window and then assigning that to the image viewer. Nope. That doesn’t work either. I thought Web1.0 was bad with canvases and all. This seems to be a step backwards.

[Edit] And Update…

So if I manually resize the ImageViewer in the page’s resized event then it seems like it works. However, I have the image viewer locked on all four edges so when the page expands the viewer should. But it doesn’t seem to work…