Selected Tab is invisible on mobile touch / hover

Hello Support Team,

I need some help with the CSS structure of the Tabs-Component.

I used the following CSS to fit my requierements:


.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text {
        text-transform: none;
        font-family: Roboto;
        font-weight: 350;
        font-size: 17px;
        color: white;
    }

        .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text:disabled {
            text-transform: none;
            font-family: Roboto;
            font-weight: 350;
            font-size: 17px;
            color: white;
        }

    .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
        text-transform: none;
        font-family: Roboto;
        font-weight: 350;
        font-size: 17px;
        color: white;
    }

    .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text:hover {
        text-transform: none;
        font-family: Roboto;
        font-weight: 350;
        font-size: 17px;
        color: white;
    }

    .e-tab .e-tab-header .e-indicator {
        background: white;
    }


But as u can see in the attached video the selected or hovered item on mobile devices gets invisible if I touch on the indicator below the Tab beside the Tab.

Could u please provide me the CSS so it works as aspected.

Thanks in advance and have a good day! 


Attachment: 20210422_005908_753d8bc4.zip

1 Reply 1 reply marked as answer

BS Balasubramanian Sattanathan Syncfusion Team April 22, 2021 11:18 AM UTC

Hi Stefan, 

Greetings from Syncfusion Support. 

We have analyzed your reported scenario “Selected Tab is invisible on mobile touch / hover” at our end and let you know that you might have faced this problem due to overridden of CSS for the tab header. So we suspect that when selecting/hovering tab item, the text color has been changed to the tab header color. So, the selected tab looks like invisible.  


Kindly share all CSS that belongs to Tab control or else replicate your problem in the above sample which would be very helpful to validate an issue and provide a prompt solution at the earliest. 

Regards, 
Balasubramanian S 


Marked as answer
Loader.
Up arrow icon