My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

luni, 9 martie 2015

Styling PrimeFaces TabView (vertical tabs with/without pictures)

A simple PrimeFaces TabView snippet of code is:

<p:tabView>
 <p:tab title="Rafael Nadal">               
  <h:panelGrid columns="2" cellpadding="10">
   <p:graphicImage library="default" name="images/rafa_l.jpg" width="70" height="100"/>
   <h:outputText value="Rafael 'Rafa' Nadal Parera (born 3 June 1986) is a Spanish professional tennis player currently ..." />
  </h:panelGrid>              
 </p:tab>

 <p:tab title="Novak Djokovic">
  <h:panelGrid columns="2" cellpadding="10">
   <p:graphicImage library="default" name="images/novak_l.jpg" width="70" height="100"/>
   <h:outputText value="Novak Djokovic (born 22 May 1987) is a Serbian professional tennis player who is currently ..." />
  </h:panelGrid>
 </p:tab>

 <p:tab title="Roger Federer">
  <h:panelGrid columns="2" cellpadding="10">
   <p:graphicImage library="default" name="images/roger_l.jpg" width="70" height="100"/>
   <h:outputText value="Roger Federer (born 8 August 1981) is a Swiss professional tennis player who is currently ..." />
  </h:panelGrid>
 </p:tab>
</p:tabView>

Now, this will produce something like in figure below:


But, let's suppose that we want something like this:

Well, the below CSS will do the trick:

.ui-tabs-vertical {
 width: 60em;
 height:38em;                
}

.ui-tabs-vertical .ui-tabs-nav {
 padding: .2em .1em .2em .2em;
 float: left;
 width: 12em;
}

.ui-tabs-vertical .ui-tabs-nav li {
 clear: left;
 width: 100%;
 padding-top:120px;
 background: url('#{resource["default:images/atp_d.png"]}');
 background-repeat: no-repeat;
 background-position: center;
 border-top-width: 1px !important;
 border-bottom-width: 1px !important;
 border-right-width: 1px !important;   
 -webkit-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -o-transform: rotate(270deg);
}
           
.ui-tabs-vertical .ui-tabs-nav li a {
 display:block;              
 padding-left: 30px;     
 /*
  you ca apply rotate here, to rotate only the text
  of course, afterwards, you have to perform the proper adjustments
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
 */
}

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected {
 background: url('#{resource["default:images/atp_s.png"]}');
 background-repeat: no-repeat;
 background-position: center;                           
}

.ui-tabs-vertical .ui-tabs-panel {
 padding: 1em;
 float: right;
 width: 40em;
}    

/* this will affect the fonts of all PrimeFaces components */
.ui-widget {
  font-family: Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 20px;               
 }              

Do not forget to attached the CSS code to the tab view:

<p:tabView styleClass="ui-tabs-vertical">
  ...
</p:tabView>

Or, if you need to obtain vertical tabs without pictures, as below:


Then you can use this CSS code:

.ui-tabs-vertical {
 width: 50em;
 height:50em;
 -webkit-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -o-transform: rotate(270deg);
}                                 
        
.ui-tabs-vertical .ui-tabs-panel {                       
 float: left;
 height:45em;
 padding-left:30px;               
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
}  

Or, make a smaller one and place it in a PrimeFaces layout (center panel):

.ui-tabs-vertical {
 width: 40em;
 height:40em;
 -webkit-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -o-transform: rotate(270deg);
}                                 
        
.ui-tabs-vertical .ui-tabs-panel {                       
 float: left;
 height:35em;
 padding-left:30px;               
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
}  

Most likely this snippet of CSS can be produced more optimal, so feel free to modify it accordingly.

Complete code on GitHub.

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors