dotnet / dotnet/aspnetcore

QuickGrid: Sample showing how to change color of sorting indicator does not work

Open
#47,805 8 comments 2 reactions 0 assignees View on GitHub
area-blazor feature-blazor-quickgrid
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 6h
Merged PRs (30d)
290

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Describe the bug

In the official sample on the Styling tab for the Blazor component QuickGrid, it shows CSS that sets the sort indicator to blue. But it always shows up as black.

Link: https://aspnet.github.io/quickgridsamples/styling

Perhaps `mask-image` should be used instead. This allows for setting the color. I was able to successfully change the color with it, but not accounting for ascending/descending icon.

```css
.quickgrid .sort-indicator {
background-color: red;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
```

### Expected Behavior

Color of sort indicator should be changeable

### Steps To Reproduce

Use the following CSS as part of the component to customize the sort indicator color:

```css
::deep .quickgrid[theme=corporate] .sort-indicator {
color: blue;
}
```

The rule is applied, but seems that SVG colors cannot be changed like this.

### Exceptions (if any)

_No response_

### .NET Version

I'm using .NET 6 and the alpha version of QuickGrid, but I suspect the same applies on the .NET 8 version, since the official sample has this problem.

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.