aspose file tools*
The moose likes JSF and the fly likes tabbed pane Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "tabbed pane" Watch "tabbed pane" New topic
Author

tabbed pane

Joe Jose
Ranch Hand

Joined: Jan 14, 2004
Posts: 125
Hi,

I am trying to adjust the width of tabbed pane and the style. Now the tab header is kind of block like command buttons ...I want it to be a smooth style. How can I do that using style sheet ? My tabbed pane is inside a table. I cannot adjust the width od each tab headder.
Could any one can give me any idea ?

Thanks,
Joe.
Denise Smith
Ranch Hand

Joined: Jul 26, 2005
Posts: 36
I'm using an IDE Ibm websphere and the "style" of the tabbed panel is defined in a .css are you using an IDE?... if so check for something in a css. RAD actually generates a tabbedpanel.css. You should be able to change the style in there.


Surround yourself with learners...They will educate you!
Denise Smith
Ranch Hand

Joined: Jul 26, 2005
Posts: 36
Here is a css that works
also...remember that if the last loaded css that applies to that style is the one that will present. This is important for several reasons
1. if your using multiple css that have the same definitions
2. if you have the style in the element that overrides the style this would apply to html tiag styles.


/********************************
*Tabbed Panel: Style 0*
**
*SlantActiveLeft = 0*
*SlantInactiveLeft = 0*
*SlantActiveRight = 2*
*SlantInactiveRight = 2*
********************************/

/* The table displaying all of the tabs, panels and buttons which has 3 rows, each row has one cell for all tabs, panels and buttons*/
.tabbedPanel {
/*background-color: #DCDDCC;*/
border-width: 1px;
border-style: solid;
border-color: #808080;
padding: 0px;
margin: 0px;
/*red */
color: #980000;
}

/* The Cell displaying all of the tabs*/
.tabbedPanel-Header {
border-width: 0px;
border-bottom-width: 5px;
border-style: solid;
/*border-color: navy;*/
border-color: #95A5B9;
padding: 0px;
padding-left:4px;
padding-top:4px;
margin: 0px;
/*color: #980000;*/

}

/* The table inside the tabs cell*/
.tabbedPanel-Header TABLE {
margin-right: 0px;
color: #980000;
}

/* Common style for active and inactive tabs*/
.tabbedPanel-TabActive, .tabbedPanel-TabInactive {
font-family: sans-serif;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
border-width: 1px;
border-bottom-width: 0px;
border-style: solid;
border-color: #95A5B9;
padding: 1px;
padding-top: 2px;
padding-bottom: 1px;
/*red */
color: #980000;
}

/* style for active tab*/
.tabbedPanel-TabActive {
/*background-color: gold;*/
background-color: #95A5B9;
/*color: window;*/
/*red */
color: #980000;
}

/* style for inactive tab(s)*/
.tabbedPanel-TabInactive {
/*background-color: navy;
/*color: windowtext;*/
/*red */
color: #ffffff;

background-color: #E5ECF3;
/*color: windowtext;*/
/*red */
/*color: #980000;*/
}

/* style for the text in active tab*/
.tabbedPanel-HyperActive {
/*color: window;*/
/*red */
color: #980000;
text-decoration: none
}

/* style for the text in inactive tab(s)*/
.tabbedPanel-HyperInactive {
/*color: windowtext;*/
/*red */
color: #980000;
text-decoration: none
}

/* style for the panels*/
.tabbedPanel-Body {
padding: 4px;
}

/* style for the Div object which is inside the panels*/
.tabbedPanel-Body DIV {
/*background-color: #EEEEEE; */
border-width: 1px;
border-style: solid;
border-color: #808080;
}

/* style for footer cell which has all the buttons*/
.tabbedPanel-Footer {
padding:0px;
padding-bottom: 4px;
padding-right:6px;
}

/* style for the input html components inside the footer cell*/
.tabbedPanel-Footer INPUT {
margin: 0px;
margin-left: 6px;
}

/********************************
*Tabbed Panel: Style 1*
**
*SlantActiveLeft = 2*
*SlantInactiveLeft = 2*
*SlantActiveRight = 2*
*SlantInactiveRight = 2*
********************************/

.tabbedPanel_1 {
background-color: transparent;
border-width: 0px;
border-bottom-width: 1px;
border-style: "solid";
border-color: #ACACAC;
padding: 0px;
margin: 0px;
}
.tabbedPanel_1-Header {
border-width: 0px;
border-bottom-width: 1px;
border-style: solid;
border-color: #808080;
padding: 0px;
padding-top: 4px;
padding-left: 4px;
margin: 0px;
}
.tabbedPanel_1-Header TABLE {
margin-right: 5px;
}
.tabbedPanel_1-TabActive, .tabbedPanel_1-TabInactive {
font-family: sans-serif;
font-size: 10pt;
font-weight: 400;
text-decoration: none;
/*color: windowtext;*/
/*red */
color: #980000;
border-width: 1px;
border-bottom-width: 0px;
border-style: solid;
border-color: #808080;
padding: 8px;
padding-top: 0px;
padding-bottom: 0px;
text-align: center;
}
.tabbedPanel_1-TabActive {
border-color: #808080;
border-bottom-color: #D4D0C8;
background-color: #D4D0C8;
}
.tabbedPanel_1-TabInactive {
border-color: #808080;
background-color:#ACACAA;
}
.tabbedPanel_1-HyperActive {
/*color: windowtext;*/
/*red */
color: #980000;
text-decoration: none;
}
.tabbedPanel_1-HyperInactive {
/*color: windowtext;*/
/*red */
color: #980000;
text-decoration: none;
}
.tabbedPanel_1-Body {
background-color: #D4D0C8;
border-width: 1px;
border-top-width: 0px;
border-bottom-width: 0px;
border-style: solid;
border-color: #ACACAC;
padding: 4px;
}
.tabbedPanel_1-Footer {
border-color: #ACACAC;
border-style: solid;
border-width: 1px;
border-top-width: 0px;
padding: 8px;
background-color: #D4D0C8;
}
.tabbedPanel_1-Footer INPUT {
margin: 0px;
margin-left: 6px;
}

/********************************
*Tabbed Panel: Style 2*
**
*SlantActiveLeft = 0*
*SlantInactiveLeft = 0*
*SlantActiveRight = 4*
*SlantInactiveRight = 0*
********************************/

.tabbedPanel_2 {
background-color: transparent;
border-width: 0px;
padding: 0px;
margin: 0px;
}
.tabbedPanel_2-Header {
border-width: 0px;
border-bottom-width: 3px;
border-style: solid;
border-color: #7D95B3;
padding: 0px;
padding-top: 4px;
padding-left: 8px;
margin: 0px;
}
.tabbedPanel_2-Header TABLE {
margin-right: 2px;
}
.tabbedPanel_2-TabActive, .tabbedPanel_2-TabInactive {
font-family: sans-serif;
font-size: 10pt;
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: #808080;
padding-left: 8px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 1px;
}
.tabbedPanel_2-TabActive {
background-color: #7D95B3;
border-color: #7D95B3;
/*
color: window;*/
/*red */
color: #980000;
font-weight: bold;
}
.tabbedPanel_2-TabInactive {
background-color: #DEDEDE;
border-color: #D4D4D4;
/*
color: windowtext;*/
/*red */
color: #980000;
font-weight: 400;
}

.tabbedPanel_2-HyperActive {
/*color: window;/*
/*red */
color: #980000;
text-decoration: none
}
.tabbedPanel_2-HyperInactive {
/*color: windowtext;*/
/*red */
color: #980000;
text-decoration: none
}
.tabbedPanel_2-Body {
background-color: transparent;
border-width: 2px;
border-top-width: 0px;
border-style: solid;
border-color: #7D95B3;
padding: 4px;
}
.tabbedPanel_2-Footer {
padding:8px;
}
.tabbedPanel_2-Footer INPUT {
margin: 0px;
margin-left: 6px;
}

/********************************
*Tabbed Panel: Style 3*
**
*SlantActiveLeft = 0*
*SlantInactiveLeft = 0*
*SlantActiveRight = 0*
*SlantInactiveRight = 0*
********************************/
.tabbedPanel_3 {
background-color: transparent;
border-width: 0px;
padding: 0px;
margin: 0px;
}
.tabbedPanel_3-Header {
border-width: 0px;
border-bottom-width: 3px;
border-style: solid;
border-color: #7D95B3;
padding: 0px;
padding-top: 4px;
padding-left: 8px;
margin: 0px;
}
.tabbedPanel_3-Header TABLE {
margin-right: 2px
}
.tabbedPanel_3-TabActive, .tabbedPanel_3-TabInactive {
font-family: sans-serif;
font-size: 10pt;
text-decoration: none;
border-width: 0px;
border-bottom-width: 2px;
border-style: solid;
padding: 5px;
padding-top: 3px;
padding-bottom: 3px;
}
.tabbedPanel_3-TabActive {
background-color: #7D95B3;
border-color: #7D95B3;
/*color: window;*/
/*red */
color: #980000;
font-weight: bold;
}
.tabbedPanel_3-TabInactive {
background-color:#DEDEDE;
border-color: window;
/*color: windowtext;*/
/*red */
color: #980000;
font-weight: 400;
}
.tabbedPanel_3-HyperActive {
/*color: window;*/
/*red */
color: #980000;
text-decoration: none;
}
.tabbedPanel_3-HyperInactive {
/*color: windowtext;*/
/*red */
color: #980000;
text-decoration: none;
}
.tabbedPanel_3-Body {
background-color: transparent;
border-width: 0px;
padding: 4px;
}
.tabbedPanel_3-Footer {
}
.tabbedPanel_3-Footer INPUT {
margin: 0px;
margin-left: 6px;
}
Joe Jose
Ranch Hand

Joined: Jan 14, 2004
Posts: 125
Let me try and let you know.

Thanks,
Joe.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: tabbed pane