Weird Tab colours on Tabpanel

[rafig]

I have a weird problem where the text colour on my tab names has become pink & I cannot workout what is causing it or how to fix it (without a complete rebuild of my environment). I have imported various sample solutions from Servoy GitHub, so I think something from one of those has affected something…
They look like this[attachment=1]IncorrectBSTabs_315x123.png[/attachment]
But when I used a completely fresh install, they look like this, which is correct
[attachment=0]CorrectBSTabs_293x96.png[/attachment]

Any ideas what I need to set in my CSS file or remove?

Thanks
Rafi

[sdevlin]

Hi Rafi,

This is completely handled by CSS.
So you probably have included a solution which has some css file that implements it.
You can double check using the DOM inspector in your browser, or by looking at css files included by your solution or its modules.

The style selectors for the tabpanbel tabs all start with “nav_tabs”
More info on the wiki page for this

For example:

.nav-tabs
{
	border-bottom: 2px solid #fc8f00;
}
.nav-tabs > li
{
	margin-bottom: -2px;
}

.nav-tabs > li.active > a
{
	color: #444;
	font-size: 11pt;
	font-weight: bold;
	border-color: #fc8f00;
	border-bottom-color: #fff;
	border-bottom-width: 2px;
}
.nav-tabs > li.active > a:hover{
	border-color: #fc8f00;
	border-bottom-color: #fff;
	border-bottom-width: 2px;
}
.nav-tabs > li.active > a:focus{
	border-color: #fc8f00;
	border-bottom-color: #fff;
	border-bottom-width: 2px;
}

[rafig]

Hi Sean,
thanks for the reply.
I have done a search for ‘nav-tabs’ and cannot find anywhere in the solution files where that is being set and cannot find anything 8-(
I added

.nav-tabs > li.disabled 
{
   color: blue;
}

still no good
I looked at the Inspector in Safari and found this
[attachment=0]Inspector.png[/attachment]
but I’m not sure I am any the wiser from that… It looks to me like it is using the standard Servoy styles.
I will experiment more when back in the office, but I’m not hopeful

[sdevlin]

Hi Rafi,

Please try chrome inspector and identify the source css file for the element’s styling (see screenshot)
I also notice that you don’t have the “a” tab in your style sheet.

So something like:

.nav-tabs > li > a
{
	color: blue;
}

[rafig]

Hi Sean,

sean:
Hi Rafi,

Please try chrome inspector and identify the source css file for the element’s styling (see screenshot)
I also notice that you don’t have the “a” tab in your style sheet.

So something like:

.nav-tabs > li > a

{
color: blue;
}

I don’t know CSS, so don’t know what I do or don’t need, like the ‘a’ tab???
I tried that, but it made no difference, so I removed any code I had in CSS for nav-tabs and then took this shot from Chrome, I hope it helps
[attachment=0]Screen Shot 2017-04-24 at 14.50.08_1291x853.png[/attachment]
Thanks
Rafi

[sdevlin]

Hi Rafi,

Sorry I meant a tag, as in html element

It looks like you are getting the red color overriding from an in-line style from material design ?
“a.md-default-them…”

Can you identify the source of this style?

[rafig]

sean:
Hi Rafi,

Sorry I meant a tag, as in html element

It looks like you are getting the red color overriding from an in-line style from material design ?
“a.md-default-them…”

Can you identify the source of this style?

It looks like it is from the ‘servoysample’ components (the old possibly not updated ones used for the svySampleCRM) [~/git/client/servoysample/lib/material/angular-material.min.js]
I will try to remove them tomorrow and post the results.
Thx

[rafig]

I’ve confirmed that it is from the ‘servoysample.zip’ added as a ‘web package as a project’ (it holds the cardboard, imagefield & searchbar components used in the svySampleCRM).
Doesn’t the styleSheet property set for the solution take priority over others that might be set in components or sub modules?? (If not, can it??)
Thanks
Rafi