Styling "Lost Focus" Header
I need to style the header of an expanded accordion, but not the current active accordion, like so:
As you can see I managed to style everything else, but I have not been able to style the header after the user clicks and expands a different header.
For reference, yellow is the active header.
Below is the class signature I found in the debug console, but even setting this value, along with !important doesn't affect the "non active, expanded" header.
.e-acrdn-item.e-select.e-selected.e-active {
background-color: #00d1b2;
}
SIGN IN To post a reply.
8 Replies
I will try and make it clearer than I already have:
The yellow header, circled in GREEN is styled correctly.
They grey header, with the RED arrow is not the color I want it to be. I need that header to be BLACK.
Of the two expanded items that you see in the picture, the user has clicked on them as follows:
The top header was clicked first. This expanded that item, and styled that header correctly in YELLOW.
They grey header, with the RED arrow is not the color I want it to be. I need that header to be BLACK.
Of the two expanded items that you see in the picture, the user has clicked on them as follows:
The top header was clicked first. This expanded that item, and styled that header correctly in YELLOW.
When the second item is clicked and expanded, which is the current state you see in the above picture, the newly expanded accordion item header gets styled in YELLOW, which is correct.
However, the first item that was expanded, and is still expanded, but no longer active, changes its header color to the grey that you see in this picture.
However, the first item that was expanded, and is still expanded, but no longer active, changes its header color to the grey that you see in this picture.
This behaviour is what I need to style. I need that header's background to go back to black.
The code you provided me does not do this. The code you provided me overrides the colour of all expanded accordion items.
That means it turns both the grey header and the yellow header black. That is not what I need. I need to style only that grey header, which is the header of an item that is still expanded, but no longer the item that is active, since the user has gone and expanded a different item, which is what triggers the original expanded item's header to go from yellow, to grey.
![]({"CloudHub.Azure.Storage.Blobs":{"connectionString":"BlobEndpoint=https://candelazinedeve.blob.core.windows.net;SharedAccessSignature=sv=2018-03-28&ss=b&srt=co&sp=rl&se=2020-07-22T21%3A59%3A42Z&sig=AOC2xAMRxHeaG6%2F9HpN9BiM%2BKjHKH2NW72vS2M%2FyVqg%3D","containerName":"content","subscription":null,"accountUri":"https://candelazinedeve.blob.core.windows.net","sourceFolder":"SupportImages/","items":[{"relativePath":"Hover Color.png","snapshot":""}],"sasToken":"sv=2018-03-28&ss=b&srt=co&sp=rl&se=2020-07-22T21%3A59%3A42Z&sig=AOC2xAMRxHeaG6%2F9HpN9BiM%2BKjHKH2NW72vS2M%2FyVqg%3D"}})
I have a few more styling issues that I can't seem to track down: First is the unselected, normal accordion item's header color:
I managed to find how to color the icon, but it isn't the same selector as the text apparently.
These next two scenarios only occur on an accordion item header that is selected, whether expanded or not:
As you can see here, on hover the arrow icon is blue, when it should be black, like the text.
This image is how it looks selected, but not in hovered state.
The colors are correct, but there is a text-decoration that isn't supposed to be there.
Again both of the last two scenarios occur whether that item is expanded or collapsed, so long as it is selected.
Thanks!
SIGN IN To post a reply.
