tabbed pane

[Joe Jose]

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]

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.

[Denise Smith]

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]

Let me try and let you know.

Thanks,
Joe.