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

IncorrectBSTabs_315x123.png

But when I used a completely fresh install, they look like this, which is correct

CorrectBSTabs_293x96.png

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

Thanks
Rafi

[sean]

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:

Code: Select all

.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

Code: Select all

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


still no good
I looked at the Inspector in Safari and found this

Inspector.png

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

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

Code: Select all

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


[rafig]

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

Code: Select all

.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

Screen Shot 2017-04-24 at 14.50.08_1291x853.png

Thanks
Rafi

[sean]

Hi Rafi,

Sorry I meant a tag, as in html element <a>

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]

Hi Rafi,

Sorry I meant a tag, as in html element <a>

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