topic Re: CSS Style Sheet and Tab Control in G Web Development Software

CSS Style Sheet and Tab Control

johnsmith2022 — Tue, 25 Jul 2023 19:28:26 GMT

I've a tab control and a CSS style sheet. But, I only seem to be able to set the background color of the tab title bar to the right of the active tabs. All the tabs, including the tab interior and controls/indicators isn't affected. The style.css has:

.tab_control {
background-color: lightgray;
}

And the HTML class attribute in G Web for the tab control is:

tab_control

Is there some way to affect the background colors of the tab contents?

Re: CSS Style Sheet and Tab Control

MilanR — Fri, 28 Jul 2023 21:06:39 GMT

Using the Browser Developer Tools (in my-case Chrome Developer Tools) I was able to find that

The css custom property --ni-background:

And the css custom property --ni-inactive-background:

Seem to be used for configuring the background color for the tab + panel and the inactive tab respectively.

So maybe configuring those properties will help you style the parts of the tab control:

.tab_control {
--ni-background: red;

--ni-inactive-background: blue;
}

Re: CSS Style Sheet and Tab Control

johnsmith2022 — Sun, 30 Jul 2023 14:47:40 GMT

That seems to work, although I see the boxes around the numeric controls within the tabs disappearing. I'm looking at that now. Thank you.