1. Home
  2. Forum
  3. Blazor
  4. Accordian CSS for text colour and toggle button focus on phones

Accordian CSS for text colour and toggle button focus on phones

Hi
I have two very small but annoying problems I wonder if you could help with.

Accordion
I am trying to control the title text colour in the top row of the accordion (see attached image). To do this I have added the following CSS which almost works however when the page is first rendered and I hover over it, the text still turns blue, but I need it to turn white. I have used object inspector and every combination I can think of, but I still cannot figure out how to do this.


 /* Accordian */

    /*Title bar - background*/
    .e-accordion .e-acrdn-item.e-select > .e-acrdn-header {
        background: #1e1e1e !important;
    }

    /*Title bar - background text on screen refresh*/
    .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
        color: antiquewhite;

    }
    /*Title bar - background text on screen refresh with hover*/
    .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content:hover {
        color: antiquewhite;
    }

    /*Title bar - text colour when expanded*/
    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
        color: antiquewhite;
    }
    /*Title bar - text colour when expanded with hover*/
    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content {
        color: white;
    }
    /*Title bar - text colour when expanded with hover and focus*/
    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover:focus .e-acrdn-header-content {
        color: antiquewhite;
    }

    /*Title bar - text colour when collapsed*/
    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
        color: antiquewhite;
    }
    /*Title bar - text colour when collapsed with hover*/
    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content {
        color: white;
    }
    /*Title bar - text colour when collapsed with hover and focus*/
    .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover:focus .e-acrdn-header-content {
        color: antiquewhite;
    }

    /*Title bar Icon*/
    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
        color: white;
    }

    /*title bar icon when moving*/
    .e-accordion .e-tgl-collapse-icon::before {
        content: '\e705';
        color: white;
    }

The second minor problem I have is that the  Sf switches work fine on a PC, but on a phone they have to be tapped twice, it looks like they need to be tapped once to get the focus, then a second time to actually toggle them. I'm wondering if there is anything I can do about this?

There are a number of switches, generated programmaticaly and the checked state is bound to a list using the following code

   <div style="border: 1px solid #757575; margin-bottom:1px; padding-left:1px;">
                                    <label>@searchTag.SearchTag</label><br />
                                    <SfSwitch IsToggle="true" CssClass="bar-color" Disabled="false" @bind-Checked="@SearchTags[localIndex].SearchTagEnabled" TChecked="bool"></SfSwitch>
                                </div>


thanks for any help you may be able to offer

Andy

Attachment: Accordion_af31cde3.zip

5 Replies 1 reply marked as answer
RV Ravikumar Venkatesan Syncfusion Team March 2, 2021 02:23 PM UTC

Hi Andy, 

Greetings from Syncfusion support. 


Q: When the page is first rendered and I hover over it, the text still turns blue 
We have validated your above query at our end and suspect that after the first hovering the accordion header item text is turned into blue and not returned to white. But, after leaving from the first hover action the accordion header item text is returned to white and for the same, we have prepared a sample and video demo for your reference that can be downloaded from the below link. 


Kindly try the shared sample and if you still facing the same problem share the below details to serve you better. 
  • Share the full rendering code of the Accordion or
  • Reproduce the problem in the above-shared sample or
  • Share a sample that illustrates the problem which would help us to proceed further.


Q: On a phone, the switch has to be tapped twice 
We have checked your reported issue and could reproduce the issue at our end. So, we have logged this as a bug report. The fix will be available on our 2021 Volume 1 release, which will be scheduled on 17th March 2021. We appreciate your patience until then. You can also track the status of this fix by using below feedback portal link.  



Kindly let us know if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


AJ Andy Jones March 3, 2021 10:07 AM UTC

Hi 

Thanks for getting back and reporting the toggle buttons as a bug.

The code and video you returned, both show effects similar to what I am seeing. I have updated your code to show my latest CSS and accordion underneath your example.

Basically, what I am trying to achieve is for the text in the title (that currently goes blue when hovered over) to follow these rules : -

Normal colour at any time, no matter what else on the screen has focus
Antique White

Hover at any time no matter what else on the screen has focus
White 

What I'm getting so far is difficult to explain, but the example you sent pretty much replicates it.
At various times (and always after a refresh), the link is blue when hovered over.

I have found it difficult to figure out how the CSS works and I have broken it down the best I can, but I'm sure that there must be a much simpler way of trying to achieve it then what I have done.

I should say it isn't essential, its mainly for aesthetics.

thanks for your help on this

Andy








Attachment: syncfusionblazoraccordion1038238743updated_8678e0a3.zip

RV Ravikumar Venkatesan Syncfusion Team March 4, 2021 03:36 PM UTC

Hi Andy, 

Thanks for the update. 

We have validated your reported query “At various times (and always after a refresh), the link is blue when hovered over” at our end. Based on your query we suspect that your requirement is to change the accordion header text color to white on the hover action. We have achieved it by overriding the default color as shown below and for the same, we have prepared a sample that can be available from the below link. 


[index.razor] 
<style> 
    /* Changed the accordion header text hovering color*/ 
    .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-icons, .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content{ 
        color: white !important; 
    } 
</style> 

Kindly try the above share sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Marked as answer
AJ Andy Jones March 4, 2021 03:42 PM UTC

Hi Ravikumar Venkatesan 

That has fixed the problem.

As always, many thanks for the prompt and excellent help

Andy


NR Nevitha Ravi Syncfusion Team March 5, 2021 04:33 AM UTC

Hi Andy, 

You are most welcome..! We are glad that our provided solution helped you, please get back to us if you need any further assistance. 

Regards, 
Nevitha 


Loader.
Up arrow icon