Adjust the size of tab header are in primefaces

0
votes

How to adjust the size of tabView's header height in primefaces? For example in the link http://www.primefaces.org/showcase/ui/panel/tabView.xhtml there are number of tabs with headers like "God Father I", "God Father II", etc, I just want to adjust the height of the header part alone, not the whole tab height.

EDIT: for example: adding height attribute to <p:tabView> would increase the overall tabs height, not the tab header/title part height.

1
cssprimefaces
What do you mean by "height of the header part alone, not the whole tab height"? Bigger text with the same size of the tab? - Geinmachi
@Geinmachi For the sake of understanding, visually, the tab is of two parts - header part which has only the tab title (we click on the title to open the tab if there are multiple tabs), and the body part which has the content of the tab. - user3366706
PrimeFaces (and jsf) is in in this regard nothing more than an html generator. Just look at the client side html and experiment with the browser developer tools to find an answer... But you'll have to learn some basic css (as can be seen in the answer (which should contain some remarks about this being an al plain css/html related issue and nothing PF specific (learn the basics and intermediate thing about these underlying html and css technologies first before starting with web development)(otherwise than PF generating the html in a certain way) - Kukeltje

1 Answers

1
votes

You can do this by using this css style

.ui-tabs.ui-tabs-top > .ui-tabs-nav li {
    height: 200px;
}