What's Wrong with this CSS?

Targets Web
1

Suddenly I found that this css code in the app header is not creating alternating row colors in my tables. I didn’t change anything to affect it but somehow the nth row odd and even are not allowing colors there. When I look at it in Chrome developer tools, then highlight the row, I can see the color there but it is dimmed out. Here is the css code:

<style>

.table {
	width: 100%: margin-bottom:1rem;
	border-collapse: collapse;
	color: #4e4e4e;
	font-family: tahoma, verdana, helvetica;
	font-size: 10.5px;
	font-weight: normal;
	box-shadow: 0 3px 5px #333;
	border-style: solid;
	border-width: .5px;
	border-color: #999;
	
}

.table thead th {
	border-style: solid;
	border-width: .5px;
	border-bottom-width: 1px;
	border-color: #999;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top: none;
	padding: 3px;
	padding-left: 5px;
	color: #4e4e4e;
	font-family: Tahoma,Verdana, Helvetica;
	font-size: 10.5px;
	font-weight: normal;
	text-align: left;
	vertical-align: bottom;
}

.table tbody+tbody {
	border-style: solid;
	border-width: .5px;
	border-color: #999;
	font-family: tahoma, verdana, helvetica;
	font-size: 10.5px;
	font-weight: normal;
	text-align: left;
}

.table td {
	vertical-align: top;
	border-style: solid;
	border-width: .5px;
	border-color: #999;
	padding: 4px;
	font-family: tahoma, verdana, helvetica;
	font-size: 10.5px;
	font-weight: normal;
	text-align: left;
}

.table tr.selected td {
	background: #E8F0FF;
	color: #000000;
}

table tr:nth-child(odd) {
	background: #ddfdde;
	color: #4e4e4e;
}


</style>

Thanks for any help. Here is an example project if you want to download and play around with it. https://drive.google.com/file/d/1j0QOrtFT13D77aMBoJ3x1ZvetjYBu44v/view?usp=sharing

2

Just taking a quick glance at it, my guess is that this has to do with specificity. If you look at definitions in the datatables css file, the selectors for these things are probably more specific than what you’ve defined here and the browser is taking those instead of yours.

3

This is what I see:

image
image809×705 29.9 KB

4

They have always worked before up until the latest release in 2022. According to the newsletter they are playing around with bootstrap stuff in order to get set for bootstrap 5 coming up. I think it might be affecting me. This code has worked for me.

5

Yes. That’s what it should display. This is just a sample app with some of my program styles being tested.

6

If you’re saying that you’re encountering this in the latest beta (2023r1), this topic should have been created in the beta channel. If not, Xojo playing around with Bootstrap 5 should not be affecting any versions of the framework until it’s released. It’s going to be a non-trivial change IIRC.

7

Im not currently testing 2023r1. I ran into the problem with 2022 r4.1. After seeing that bootstrap was changing, I stripped out my bootstrap styles and created custom controls instead. But, certain parts of the listbox cannot be styled using style.value so instead I am using the app header.

I first noticed this problem immediately when I started using r4. As soon as I deployed to the cloud, my styles were missing… primarily listboxes and buttons, but other stuff too. So that’s when I decided to get rid of bootstrap. I deleted my bootstrap file and ran the program locally. The program ran without styles and it appears just as it did on the cloud. Somehow the cloud is not reading the bootstrap file as soon as I upgraded to r4. Im guessing because they are playing with the implementation of bootstrap, but that’s just a guess. As soon as I hit r4 my styles on the cloud stopped working and I can reproduce the bug by deleting my bootstrap.

8

Do you see it in a different way?

9

Sorry. I didn’t understand what you were getting at. lol. The background color in the listbox rows should be green and white. The code above is in the app header but is not working like it should.

10

Does anyone know what current bootstrap is supported in the latest official release?

11

Bootstrap 4.6

12

Like this?
image

13

It is supposed to happen that way but for me it is not. The color isn’t the same but it looks like you got it working. Is it from the app header?

14

Your sample code (download) does not have the same CSS code as your original post. I didn’t get that earlier.

I think you want this:
image

Change this:

table tr:nth-child(odd) {
	background: #ddfdde;
	color: #4e4e4e;
}

to

.table-striped tbody tr:nth-of-type(odd) {
	background: #ddfdde;
	color: #4e4e4e;
}

or

.table-striped tbody tr:nth-of-type(odd) {
	background-color: #ddfdde;
	color: #4e4e4e;
}
15

Well that fixes the problem. I wonder why all the sudden my old code stopped working. I didn’t even know xojo was using the striped table. I tried using in the past and xojo didn’t recognize it. Weird. Oh well, problem solved.

16

It’s possible that Xojo updated the underlying control.

Remember that in Web 2, all of the complex controls are third-party, liberally licensed controls. It was done this way so that:

  1. Web 2 could start off offering more features that matched the other platforms
  2. The controls didn’t have to be “maintained” per se.
  3. Web 2 could be more like the other platforms in that the “framework” was more of a middleware between the base OS (in this case Bootstrap) and your app.