CSS how to set Tab panel label height

Classic Servoy
1

Hi,
I would like to change the tab panel label height on the NGClient:
[attachment=0]tab panel height.PNG[/attachment]

How can I manage the css to control this tab panel aspect?

Best regards

Marco Rossi

tab panel height.PNG

2

Hi Marco,

Did you find an answer to this? I have the same request

Dave

3

Hi Dave,
you can use the “.nav-tabs” class to manage this element.

ex:
.nav-tabs.middle
{
font-size: 6pt;
font-weight: normal;
padding-left: 10px;
background-color: #ffffff;
margin: 0px;
}

4

Hi Marco,

Sorry for the long pause - just returning to this - having tried everything I can think of and looked at various CSS sources, nothing seems to actually affect the overall height of the tab element itself which I think is the thing you first queried. Changes to the .nav-tabs class allows most other things but not the height? Using “height: 36px;” for example simply drops the whole tab lower, eventually hiding the tab text text completely if you reduce the 36 to say 18. Do you have a definition that does change the tab element height itself?

5

Hi Dave,
here are my tabPanels. They have two differents heights: one height for the main one and one height (smaller) for the others.
[attachment=0]example.PNG[/attachment]

Just to check if we’re on the same page: are you trying to reach a result like this?

example.PNG
example.PNG756×165 7.12 KB

6

Hi Marco,
Thanks for the super quick response! Yes exactly - I want to control the tab height as the default is too big.

7

Hi David, I just sent you a private message, did you receive it?

However for sharing the solution with everyone, you can overwrite the margin/padding in this way:

.svy-tabpanel.medium > .nav-tabs > li > a
{
	margin: 2px;
	padding: 3px;
	.. whatever
}
.svy-tabpanel.medium > .nav-tabs > li.active > a
{
	.. whatever you want for the active tab
}

Hope this helps
Marco

8

Yes, and many thanks. Sent you a PM in reply!