1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Tab Control - Custom CSS not functioning

Tab Control - Custom CSS not functioning

We've used the themestudio to generate a site wide CSS theme:


This produces nice headers with our dark blue background and white text.
However the tab control uses this dark blue with the standard font colour for the "secondary" tabs:




I can't see any way to override this in the theme so we'd like to try and override it at time of render.

However the problem is that I can't get it to recognise alternate CSS.


<head runat="server">
    <title></title>
    <style type="text/css">
        .test {
            color: red;
            background-color: green;
        }
    </style>
</head>
<body>

    <link rel="stylesheet" rel='nofollow' href="<%= UrlHelper.ResolveLib("/psy_multi_css.css") %>" />

    <form id="form1" runat="server">
<div class="test">test</div>
<ej:Tab ID="tab1" runat="server" Collapsible="false" HeaderPosition="Left" ShowRoundedCorner="true" CssClass="test">


A div on the page correctly uses the "local" css but the tab control doesn't seem to see it.

If I break the link to the theme CSS it reverts back to "default" css for the control but still doesn't see the local CSS.

attached is a simplified version of our page.




Attachment: syf_debug_33e4297c.7z

3 Replies
PO Prince Oliver Syncfusion Team April 24, 2019 06:45 AM UTC

Hi Christian ,  
 
Greetings from Syncfusion support. 
 
We have checked your shared code. cssClass will be applied to the wrapper element of Tab control and you can apply CSS for ul li items by using their class names from this custom class. You can inspect the element through console window to get class names. Please refer to the below screenshot. 
 
 
  
For example, to apply background color for li item you need to set styles for “e-item e-select” class from this custom cssClass and for applying style to text add required styles for “e-link” class.  Please refer to the below code snippet. 
 
    <style type="text/css"> 
        .test { 
            color: red; 
            background-color: green; 
        } 
         .test .e-box.e-left .e-item.e-select{ 
            background-color: green; 
        } 
       .test .e-box.e-left .e-item.e-select .e-link{ 
           color:red; 
       } 
    </style> 
 
We have prepared a sample with theme studio CSS similar to your scenario. Please find the sample at the following location 
 
Let us know if you need any further assistance on this. 
 
Regards, 
Prince 


PS PSYChristian April 25, 2019 08:35 AM UTC

Thanks, that was very helpful.
It allows the text and bgcolor to be changed exactly as needed.

It does however leave a small remnant of the dark blue "behind" the tabs, I can't seem to get element inspector to tell me the CSS that is affecting it.



CI Christopher Issac Sunder K Syncfusion Team April 26, 2019 07:26 AM UTC

Hi Christian,  

Thanks for the update. 

The active tab item has border-left CSS which is displayed on the left end of active tab. To remove this CSS, we suggest you to add the  border-left CSS  for active tab item class as shown below.  

<style type="text/css"> 
        .test { 
            color: red; 
            background-color: green; 
        } 
         .test .e-box.e-left .e-item.e-select{ 
            background-color: bisque; 
        } 
       .test .e-box.e-left .e-item.e-select .e-link{ 
           color:red; 
       } 
        .test .e-box.e-left .e-item.e-active{ 
              border-left: 1px solid #c8c8c8; 
        } 
    </style> 

The color left behind the tabs are due to the “border-radius” CSS set for tab items. This CSS is added because you have enabled “ShowRoundedCorner” in your sample. You can set this property to false to remove this CSS.  

Please let us know if you have any concerns. 

Thanks, 
Christo 


Loader.
Up arrow icon