• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

tabbed pane

 
Joe Jose
Ranch Hand
Posts: 125
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 36
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 36
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 125
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Let me try and let you know.

Thanks,
Joe.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic