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
Post a Comment