CSS how to set Tab panel label height

Forum to discuss the new web client version of Servoy.

CSS how to set Tab panel label height

Postby marco.rossi » Tue Oct 09, 2018 3:07 pm

Hi,
I would like to change the tab panel label height on the NGClient:
tab panel height.PNG


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

Best regards

Marco Rossi
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: 110
Joined: Sun Apr 12, 2015 9:33 pm

Re: CSS how to set Tab panel label height

Postby drookwood » Thu Feb 21, 2019 4:30 pm

Hi Marco,

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

Dave
David Rookwood

SAN Developer
drookwood
 
Posts: 290
Joined: Tue Nov 11, 2003 7:08 pm
Location: Somerset, UK

Re: CSS how to set Tab panel label height

Postby marco.rossi » Fri Jan 24, 2020 5:54 pm

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;
}
Marco Rossi
Senior Analyst Developer
Freelance Consultant

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

Re: CSS how to set Tab panel label height

Postby drookwood » Wed Apr 22, 2020 4:11 pm

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?
David Rookwood

SAN Developer
drookwood
 
Posts: 290
Joined: Tue Nov 11, 2003 7:08 pm
Location: Somerset, UK

Re: CSS how to set Tab panel label height

Postby marco.rossi » Wed Apr 22, 2020 6:27 pm

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



Just to check if we're on the same page: are you trying to reach a result like this?
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: 110
Joined: Sun Apr 12, 2015 9:33 pm

Re: CSS how to set Tab panel label height

Postby drookwood » Wed Apr 22, 2020 9:01 pm

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

SAN Developer
drookwood
 
Posts: 290
Joined: Tue Nov 11, 2003 7:08 pm
Location: Somerset, UK

Re: CSS how to set Tab panel label height

Postby marco.rossi » Thu Apr 23, 2020 6:31 pm

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:

Code: Select all
.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
Marco Rossi
Senior Analyst Developer
Freelance Consultant

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

Re: CSS how to set Tab panel label height

Postby drookwood » Thu Apr 23, 2020 11:29 pm

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

SAN Developer
drookwood
 
Posts: 290
Joined: Tue Nov 11, 2003 7:08 pm
Location: Somerset, UK


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 8 guests