How to decrease the size of the <tabview> buttons when are orientation:"left", using PrimeFaces -


<p:tabview orientation="left" dynamic="false" cache="false" style="font-size: 70% !important; **wight:300px**; border: none;">     <p:tab title="mainboard" id="mainboard" style="font-size: 70% !important; width:200px">         <p:scrollpanel style="width:800px;height: 600px;border: none;"  mode="native">             <ui:include src="/mainboard.xhtml" />         </p:scrollpanel>     </p:tab>      <p:tab title="secboard" id="secboard" style="font-size: 70% !important; width:200px">         <p:scrollpanel style="width:800px;height: 600px;border: none;"  mode="native">             <ui:include src="/secboard.xhtml" />         </p:scrollpanel>     </p:tab> </p:tabview> 

* *wight:300px tabview * * - doesn't work.

you need include separate css file , set .ui-tabs-left > .ui-tabs-nav width. tested code below various sizes, , seems work.

.ui-tabs-left > .ui-tabs-nav {     width:300px !important;     } 

you may run trouble content panel being forced below tabs. used following code prevent happening on project created while back.

.ui-tabs-left > .ui-tabs-panels {     height:100% !important;     float:right !important;     width:89% !important;     }  .ui-tabs-left > .ui-tabs-nav {     float:left !important;     width:10% !important;     height:100% !important;     }  

Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -