TabPanel Css not applied

Forum to discuss the new web client version of Servoy.

TabPanel Css not applied

Postby marco.rossi » Fri Oct 19, 2018 4:50 pm

Hi,
I'm using a lot of tabPanels within an NGClient solution.
I'm trying to apply different styles to make them to look like different.

By acting on the main class ".nav-tabs" all works fine but, in this way, I will change all the tabPanels so I tried to create a new class
named ".nav-tabs.small" in which, for example, I put a smaller font size.

Seems that this approach doesn't work, you can reproduce the issue by using this sample solution:
test_tabpanel_css.servoy


You'll see that the first tabPanel (the one driven by the class ".nav-tabs") reflects properly the css properties but the second tabPanel (the one driven by the class ".nav-tabs.small") seems to ignore the class I assigned to it.
what happen.PNG



By inspecting it with Chrome, I see that the class ".small" seems not applied.

Thanks
You do not have the required permissions to view the files attached to this post.
Marco Rossi
Senior Analyst Developer
Freelance Consultant

IT Manager @Mantho
Webmaster @Sitoliquido
marco.rossi
 
Posts: 101
Joined: Sun Apr 12, 2015 9:33 pm

Re: TabPanel Css not applied

Postby patrick » Fri Oct 19, 2018 7:16 pm

I looked at your example and couldn't see the "small" class assigned to anything, so not sure what you have tried.

When you would have attached a style class "small" to the tab panel, .nav-tabs.small wouldn't hit it, because the style class you assign is set to the tab panel, not the tab. That means in the browser it ends up on a div above the actual tab you are trying to target. But since you are saying .nav-tabs.small, the rule will only be applied to an element that has the class "nav-tabs" and "small". Your class ends up on the div classed "svy-tabpanel" above that, so that will not work. Even worse, the text you want to style is below the nav-tabs element. The structure looks roughly like this (you can see that in inspector)

<div class="svy-tabpanel"> //this is where your "small" class ends up
<ul class="nav-tabs">
<li class="nav-item">
<a class="nav-link">
<uib-tab-heading>
<span>your text</span>

You'd have to do something like this to hit the tab text:

.svy-tabpanel.small > .nav-tabs > li > a

and when active

.svy-tabpanel.tab-small > .nav-tabs > li.active > a

So you want to target the <a> element which sits inside a <li> element which is inside a class "nav-tabs" element which sits in an element with classes "svy-tabpanel" (always there) and "small".

I know it seems complicated at first, but you can always have a look in developer tools, check where your class ends up and properly target what you need.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3692
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: TabPanel Css not applied

Postby marco.rossi » Mon Oct 22, 2018 6:29 pm

Hi Patrick,
it works now.

Wasn't clear for me that "svy-tabpanel" was the "super" class for the tabPanel.

Thank you very much for your explanation.

Best regards
Marco
Marco Rossi
Senior Analyst Developer
Freelance Consultant

IT Manager @Mantho
Webmaster @Sitoliquido
marco.rossi
 
Posts: 101
Joined: Sun Apr 12, 2015 9:33 pm

Re: TabPanel Css not applied

Postby huber » Wed Mar 31, 2021 3:12 pm

Hi Marco, hi Patrick

Where you able to size the height of the tabs? If you did, what selector is needed?

Regards, Robert
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 407
Joined: Mon May 14, 2012 11:31 pm

Re: TabPanel Css not applied

Postby huber » Fri Apr 09, 2021 9:24 am

I was able to make the tabs taller in height by setting margin top to -10px. A bit strange to me but works in my environment.

Regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 407
Joined: Mon May 14, 2012 11:31 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 3 guests