Hi, there is the "tabContentStyleClass" attribute of panelTabbedPane component. Try to set a corresponding width style in the stylesheet. This should affect all tab-bodies.
Alternatively, you can try to play around with putting a div or table element around the content and set their width. cheers, Gerald On 4/24/07, Nanabolu, Bhvaharan <[EMAIL PROTECTED]> wrote:
Can anyone please provide me a solution. Thanks, Bhavaharan ________________________________ From: Nanabolu, Bhvaharan [mailto:[EMAIL PROTECTED] Sent: Wednesday, April 18, 2007 6:23 PM To: [email protected] Subject: tomahawk tabbed pane problem Hi JSF Experts, Can Someone please help me with this issue. I am using tomahawk Tabbed Pane in an application and I am having a problem in setting the size of tab itself.The size of the tab depends on the size of the elements which is included in its content. As each tab in my tabbed pane contains many elements, the size of the each tab is very large which I don't want to be. I tried to override the defaultStyles for tabbed pane by using my own style sheet but that did not reduced the size of the tab.Following is the style sheet class which I used .activeTab{ width: 30px !important; font-size: 100% !important; background-color: #FFFFFF !important; border-top: 2px solid #91A0CA !important; border-left: 2px solid #91A0CA !important; border-right: 2px solid #91A0CA !important; border-bottom: 1px none !important; padding: 2px !important; text-align: center !important; font-weight: bold !important; -moz-border-radius-topleft:20px ! important; -moz-border-radius-topright:20px ! important; } Is there any way that I can make the size of the tabs to be fixed irrespective of the number of elements in each tab. I am using the following myfaces jars myfaces-api-1.1.6-SNAPSHOT.jar myfaces-impl-1.1.6-SNAPSHOT.jar tomahawk-1.1.5-SNAPSHOT.jar I am attaching the jsp in which the tabbed pane is being used and defaultStyles.css which the tabbed pane uses. defaultStyles.css table.myFaces_panelTabbedPane{ border-style: none; padding: 0; border-spacing: 0; empty-cells: show; } .myFaces_panelTabbedPane_activeHeaderCell{ border-top: 2px outset silver; border-right: 2px outset silver; border-bottom: 0px none; border-left: 2px outset silver; text-align: center; } .myFaces_panelTabbedPane_inactiveHeaderCell, .myFaces_panelTabbedPane_disabledHeaderCell{ border-top: 1px outset silver; border-right: 1px outset silver; border-bottom: 0px none; border-left: 1px outset silver; text-align: center; background-color: silver; } .myFaces_panelTabbedPane_activeHeaderCell input, .myFaces_panelTabbedPane_inactiveHeaderCell input, .myFaces_panelTabbedPane_disabledHeaderCell label{ border-style: none; width: 100%; } .myFaces_panelTabbedPane_activeHeaderCell input{ cursor: pointer; background-color: transparent !important; /* background-color: inherit; */ } .myFaces_panelTabbedPane_inactiveHeaderCell input{ cursor: pointer; background-color: silver; } .myFaces_panelTabbedPane_disabledHeaderCell label{ cursor: default; background-color: silver; } .myFaces_panelTabbedPane_emptyHeaderCell{ border-style: none; } .myFaces_panelTabbedPane_activeHeaderCell input:hover, .myFaces_panelTabbedPane_inactiveHeaderCell input:hover{ /* border-top: orange solid 2px; */ } .myFaces_panelTabbedPane_subHeaderCell{ height: 2px; font-size: 0; border-bottom: 0px none; } .myFaces_panelTabbedPane_subHeaderCell_active{ border-top: 0px none; } .myFaces_panelTabbedPane_subHeaderCell_inactive{ border-top: 2px outset silver; } .myFaces_panelTabbedPane_subHeaderCell_first{ border-left: 2px outset silver; } .myFaces_panelTabbedPane_subHeaderCell_last{ border-top: 2px outset silver; border-right: 2px outset silver; } .myFaces_panelTabbedPane_pane{ border-top: 0px none; border-right: 2px outset silver; border-bottom: 2px outset silver; border-left: 2px outset silver; padding: 10px; } layout1.jsp <%@ taglib uri="http://java.sun.com/jsf/html"; prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core"; prefix="f"%> <%@ taglib uri="http://myfaces.apache.org/tomahawk"; prefix="t"%> <html> <head> </head> <body> <f:view> <h:form id="layoutFrm"> <t:panelTabbedPane> <t:panelTab label="Facility" > <t:dataTable value="#{facilityHandler.facilities}" var="facility" id="facilityData" cellpadding="0" cellspacing="0" width="100%" border="0" preserveDataModel="false" rows="6" rowClasses="even,odd,even,odd,even,odd" rowIndexVar="rowIndex" sortColumn ="#{facilityHandler.sort}" sortAscending ="#{facilityHandler.ascending}" > <!-- core column table cells --> <t:column> <t:graphicImage value="../../img/checkmark.gif" alt="Current Selection" rendered="#{rowIndex==facilityHandler.selectedRowIndex && facilityHandler.facility!=null}"> </t:graphicImage> </t:column> <t:column> <f:facet name="header" > <h:outputText value="Select One" id="h1"/> </f:facet> <t:commandLink action="#{facilityHandler.viewFacility}" > <t:graphicImage value="../../img/edit_icon.gif" border="0" alt="Click here to edit the record" /> <f:param name="selectedRowIndex" value="#{rowIndex}"/> </t:commandLink> </t:column> <t:column id="c1"> <f:facet name="header" > <t:commandSortHeader columnName="reportPeriod" arrow="true" id="s1"> <h:outputText value="Report Period" id="h1"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.reportPeriod}" id="t1"> <f:convertDateTime pattern="dd-MM-yyyy"/> </t:outputText> </t:column> <t:column id="c2"> <f:facet name="header" > <t:commandSortHeader columnName="branch" arrow="true" id="s2"> <h:outputText value="Branch" id="h2"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.branch}" id="t2"/> </t:column> <t:column id="c3"> <f:facet name="header" > <t:commandSortHeader columnName="branchName" arrow="true" id="s3"> <h:outputText value="Branch Name" id="h3"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.branchName}" id="t3"/> </t:column> <t:column id="c4"> <f:facet name="header" > <t:commandSortHeader columnName="cif" arrow="true" id="s4"> <h:outputText value="CIF" id="h4"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.cif}" id="t4"/> </t:column> <t:column id="c5"> <f:facet name="header" > <t:commandSortHeader columnName="clientName" arrow="true" id="s5"> <h:outputText value="Client Name" id="h5"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.clientName}" id="t5"/> </t:column> <t:column id="c6"> <f:facet name="header" > <t:commandSortHeader columnName="csid" arrow="true" id="s6"> <h:outputText value="CSID" id="h6"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.csid}" id="t6"/> </t:column> <t:column id="c7"> <f:facet name="header" > <t:commandSortHeader columnName="facilityId" arrow="true" id="s7"> <h:outputText value="Facility ID" id="h7"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.facilityId}" id="t7"/> </t:column> <t:column id="c8"> <f:facet name="header" > <t:commandSortHeader columnName="facilityName" arrow="true" id="s8"> <h:outputText value="facility Name" id="h8"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.facilityName}" id="t8"/> </t:column> <t:column id="c9"> <f:facet name="header" > <t:commandSortHeader columnName="dealId" arrow="true" id="s9"> <h:outputText value="Deal ID" id="h9"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.dealId}" id="t9"/> </t:column> <t:column id="c10"> <f:facet name="header" > <t:commandSortHeader columnName="dealName" arrow="true" id="s10"> <h:outputText value="Deal Name" id="h10"/> </t:commandSortHeader> </f:facet> <t:outputText value="#{facility.dealName}" id="t10"/> </t:column> <t:column id="c11"> <f:facet name="header" > <t:commandSortHeader columnName="creditPurpose" arrow="true" id="s11"> <h:outputText value="Credit Purpose" id="h11"/> </t:commandSortHeader> </f:facet> <t:inputText value="#{facility.creditPurpose}" id="t11"/> </t:column> <t:column id="c12"> <f:facet name="header" > <t:commandSortHeader columnName="facilityType" arrow="true" id="s12"> <h:outputText value="Facility Type" id="h12"/> </t:commandSortHeader> </f:facet> <t:inputText value="#{facility.facilityType}" id="t12"/> </t:column> <t:column id="c13"> <f:facet name="header" > <t:commandSortHeader columnName="currency" arrow="true" id="s13"> <h:outputText value="Currency" id="h13"/> </t:commandSortHeader> </f:facet> <t:inputText value="#{facility.currency}" id="t13"/> </t:column> <t:column id="c14"> <f:facet name="header" > <t:commandSortHeader columnName="committedAmount" arrow="true" id="s14"> <h:outputText value="Committed Amount" id="h14"/> </t:commandSortHeader> </f:facet> <t:inputText value="#{facility.committedAmount}" id="t14"> <f:convertNumber integerOnly="true" maxFractionDigits="0" /> </t:inputText> </t:column> <t:column id="c15"> <f:facet name="header" > <t:commandSortHeader columnName="committedAmountUSD" arrow="true" id="s15"> ... [Message clipped]
-- http://www.irian.at Your JSF powerhouse - JSF Consulting, Development and Courses in English and German Professional Support for Apache MyFaces
