Hi Gerald,
Thanks for the explanation you have provided.I tried setting the
width of the tabContentStyleClass attribute of panelTabbedPane component but it
decreases the width of the clickable area in the tab but not the size of the
tab itself.
I cannot reduce the width of the content of the tab by wrapping it
around div or table element because I don't want the content to be squeezed.
Thanks,
Bhavaharan
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gerald Müllan
Sent: Tuesday, April 24, 2007 12:28 PM
To: MyFaces Discussion
Subject: Re: tomahawk tabbed pane problem
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
==============================================================================
Please access the attached hyperlink for an important electronic communications
disclaimer:
http://www.credit-suisse.com/legal/en/disclaimer_email_ib.html
==============================================================================
