• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • paul wheaton
  • Paul Clapham
  • Ron McLeod
Sheriffs:
  • Jeanne Boyarsky
  • Liutauras Vilda
Saloon Keepers:
  • Tim Holloway
  • Carey Brown
  • Roland Mueller
  • Piet Souris
Bartenders:

tabbed pane

 
Ranch Hand
Posts: 125
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Ranch Hand
Posts: 36
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Let me try and let you know.

Thanks,
Joe.
 
reply
    Bookmark Topic Watch Topic
  • New Topic