WebListbox Design Hacks

Targets Web
1

I’m trying to write a fairly simple web app that will take some incoming data and display it on the page. Nothing fancy - it’s to be used in a digital signage application to display a schedule that gets updated throughout the day.

Right now I am using a WebListbox to display the data, but I don’t want the “listbox” look. I don’t want the lines to alternate colors. I don’t want dividing lines between the columns. I want to change the text size. Etc.

I am sure I can do this with web styles but there’s no simple explanation how in the docs and I am not knowledgeable in regards to CSS.

Can anyone point me in the right direction?

Thanks!

2

Someone else may give you a different answer, but CSS is probably the best approach. It does have a bit of a learning curve. I would recommend: https://bootswatch.com/ for a bootstrap theme. Using a theme gives you a good starting point. You can use sites like: Free Online CSS Beautifier / Formatter - FreeFormatter.com to “beautify” your CSS. This will make it easier to read. Programs like Notepad ++ are SUPER helpful as well.

In your boostrap theme you will probably see a line like:

.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(73, 162, 98);
}

You can comment in CSS like this (/**/):

.table-striped tbody tr:nth-of-type(odd) {
/*background-color: rgba(73, 162, 98);*/
}

The Xojo Listbox is a striped table. “tr” defines a row in HTML and you are changing the background of all odd rows.

W3schools has been my closest friend since starting web development. Here is the page on striped tables: How To Create A Zebra Striped Table

Hope this helps!

2 Likes
3

@Jon_Ogden I agree CSS is the way to go. I wrote a bit about it on my blog. Here for instance about changing the height of rows. CSS sounds more complicated as it really is, is not much different to the styles of web 1. There will be a learning curve, but I’m sure you will master this quite quickly.

4

Thanks, Jeannot and Ezekiel. I will take a look at these an forge ahead!

1 Like
5

Pardon my ignorance but where do you put the Bootstrap theme file? I was looking through the User Guide and as is typical, it talks about using Bootstrap but doesn’t tell you where the css file goes…

6

It looks like the docs are missing that information:
https://documentation.xojo.com/topics/user_interface/web/changing_the_appearance_of_controls.html
from

To use one of the the themes at Bootswatch.com, click the Download button’s menu (not the button itself) and choose the file titled bootstrap.min.css . That’s the only file you need and it must have that file name to work in Xojo. Once you have downloaded your theme, drop it into your project to use it.

2 Likes
7

Thank you!

8

So I’m working through everything, trying to figure out what in the CSS file changes what on the page. So here’s a question. The CSS file has a number of options for tables like “Success”, or “Warning” or “Danger.” How do you set your listbox field to use that color option that is in the CSS file? Do you call out the CSS label from the style property?

9

This is an ability that makes more sense being called from a button or something, so that’s how I setup my test. Added a Listbox and a Button to the page. Add this method:

Public Sub SetListIndicator(lb as WebListBox, indicator as String)
  ExecuteJavaScript( "$('#" + lb.ControlID + "_table').addClass('table-" + indicator + "');" )
End Sub

And called as:

SetListIndicator( Listbox1, "warning" )

Unfortunately you can’t set CSS classes to the DOM elements using WebStyle and setting the Indicator property of a WebListbox has no effect (64025)

10

This is driving me nuts!

I’m trying to set the background color of the listbox to something other than white and no matter what I do in the CSS file the background is still white!

This is way too difficult. Why didn’t Xojo add hooks in the IDE to do this sort of thing.

1 Like
11

If you’re opposed to customizing the CSS of your Bootstrap theme (which is the right way to do this), you can add this to your Listbox’s Shown event:

ExecuteJavaScript( "$('#" + me.ControlID + "_table').removeClass('table-striped table-bordered');" )
12

I’m not opposed at all. I’m trying to figure out what CSS value sets the background color of the unpopulated listbox…

It’s there on the page. It’s white. I don’t want it white. I’ve been able to remove all the borders, etc. But not set the color of the background.

13

In CSS:

.XojoListBox .DTFC_ScrollWrapper,
.XojoListBox .table,
.XojoListBox .dataTables_wrapper tr.buffer {
  background-color: #f00 !important;
}

image
image810×742 4.74 KB

You can swap the #f00 bit for transparent or any valid color value.

1 Like
14

If you only want to ditch the white when there are no rows:

.XojoListBox .dataTables_wrapper tr.buffer {
  background-color: #f00 !important;
}
1 Like
15

Thank you! See I would never have known that. Because I was looking at .table items. So there’s .XojoListbox items. There’s .striped-table items. How are you supposed to know what to use? Trial and error?

One last question - I want to have a header but I don’t want the sort arrows. I’ve managed to change the header background color what I want but I don’t want the up/down arrows. Can those be removed?

1 Like
16 
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: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:after {
    content: "" !important;
}
17

The tool you need for all of this is the browser inspector. By right-clicking an item in the browser window and selecting “Inspect Element” from the context menu, you can open the inspector. On the left you’ll see the listing of all items in the currently loaded page’s Document Object Model. By stepping up and down the three, you’ll see the the right-hand sidebar will update to show what CSS is applied to those objects.

This might be helpful to you or others:
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools

1 Like
18

@Jon_Ogden

You might want to give http://brackets.io/ a try as well. It will be soon out of maintenance. I’m personally not using it all the time, but I noticed that particularly beginners like it pretty much to get into the topic. Si I’m mainly using it when teaching people CSS.

That was the feedback I got as well when I wrote this article. People didn’t know about brackets and it apparently helped them to get started. The article is quite long. Brackets is described in the chapter “Let’s talk about tools”. Once you are a bit familiar with CSS, the other tools mentioned by @Anthony_G_Cyphers are the better choice, as they are more robust and things are changing quickly on the web, and the big ones are all reflecting the newest developments.

19

Thanks guys. Very helpful. Quite a change from Web1.0 where you could add web styles to an object to customize it.

20

Both of these lines look the same. And this took away the up arrow but not the down arrow. So I have a feeling that these lines should be different…