We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tab Control - Custom CSS not functioning

Thread ID:

Created:

Updated:

Platform:

Replies:

144174 Apr 23,2019 01:25 PM UTC Apr 26,2019 07:26 AM UTC ASP.NET Web Forms 3
loading
Tags: Tab
PSYChristian
Asked On April 23, 2019 01:25 PM UTC

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

Prince Oliver [Syncfusion]
Replied On 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 


PSYChristian
Replied On 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.



Christopher Issac Sunder K [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon