Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Using an external css file with the tab control

Using an external css file with the tab control Options
Previous Topic · Next Topic
Mark Rae
Posted: Saturday, January 31, 2009 11:16:04 AM
Rank: Advanced Member
Groups: Member

Joined: 11/13/2008
Posts: 43
Hi,

I want to use an external css file with the tab control.

I have the following styles defined in the css file, for testing purposes:

Code: CSS 
.TabSelected
{
	background-color:Orange;
	font-weight: bold; color:Green;
}
.TabNormal
{
	background-color:Gray;
	color:Red;
}


And I have the following markup inside the tab control:

Code: HTML/ASPX 
<LookItems>
	<eo:TabItem Height="21" ItemID="_Default" 
		NormalStyle-CssClass="TabNormal"
		SelectedStyle-CssClass="TabSelected" 
	LookItems>


However, this doesn't do what I'm expecting. Specifically, the background-color property changes the colour of the tab's border, not its background, and the color property seems to have no effect on the colour of the text in the tab header.

I've looked through the documentation and samples but can't find anything on NormalStyle-CssClass or SelectedStyle-CssClass.

1) Can you please tell me what I'm doing wrong here?

2) Why is it necessary to specify a CssFile property for the tab control? Can't it simply use whatever stylesheet has been added to the page header...?

Thanks.
Back to top
 
eo_support
Posted: Saturday, January 31, 2009 5:31:30 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We tested the following code and it works fine:

Code: HTML/ASPX 
<style type="text/css">
.TabSelected
{
    background-color:Orange;
    font-weight: bold; color:Green;
}
.TabNormal
{
    background-color:Gray;
    color:Red;
}
</style>
<eo:TabStrip runat="server" id="TabStrip1" Width="304px">
    <TopGroup>
        <Items>
            <eo:TabItem Text-Html="New Tab Item"></eo:TabItem>
            <eo:TabItem Text-Html="New Tab Item"></eo:TabItem>
        </Items>
    </TopGroup>
    <LookItems>
        <eo:TabItem ItemID="_Default" 
            NormalStyle-CssClass="TabNormal" 
            SelectedStyle-CssClass="TabSelected"></eo:TabItem>
    </LookItems>
</eo:TabStrip>


The reason that it did not work for you might has to do with other settings you have on the TabStrip. The TabStrip gets styles from various places, including ControlSkinID, CssText and CssClass. So you can try to clear them all out and then see if it works for you. Or you can start with our "barebone" version and then compare with yours to see which optiongs brought in the undesired result.

You do not have to use CssFile when using CssClass. The TabStrip can pick up whatever you have in your page (as shown in the above example). CssFile is just an extra feature for you to render a CSS file together with the TabStrip.

Hope this helps.

Thanks!
Back to top
 
Mark Rae
Posted: Wednesday, February 4, 2009 6:47:10 AM
Rank: Advanced Member
Groups: Member

Joined: 11/13/2008
Posts: 43
eo_support wrote:
The reason that it did not work for you might has to do with other settings you have on the TabStrip.

In fact, the problem seems to be due to a conflict with other styles specified in the external stylesheet, specifically the div style.

E.g. using the sample code that you suggested, everything works.

However, if you add an extra style definition like this:

Code: CSS 
div
{
	font-size:inherit;
	color: #ffffff;
	font-family:verdana;
	background-color:#000000;
}


it doesn't...
Back to top
 
eo_support
Posted: Wednesday, February 4, 2009 7:45:14 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

That's very normal. Since the TabStrip also uses DIV element, your style are picked up by the TabStrip as well. Generally you should avoid having element name selector in your style sheet for commonly used element types such as DIV, TABLE/TD, IMG, etc. Because by definition, they apply to all elements of that type. You will want to limit their scope by changing the selectors to such as class name selector.

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.