Ability to change the background color when a cell is selected

[sylvoslee]

The default color is red on chrome,but white on Edge and IE

[Marc-Andre-Rivet]

@sylvoslee Thanks for bringing this to our attention. You're touching onto both a bug and a possible feature request.

The bug first

I also see that the cells are not correctly styled in IE11 but cannot see this behavior in Edge -- the earliest version of Edge I have access to is 15. Can you confirm on which version you are experiencing this issue?

This is caused by IE11 not evaluating rgba colors correctly and setting everything to transparent afterwards, text included -- awkward!

If you need a temporary fix for this you can apply a custom style with the css property. Something like this should be sufficient (in IE11):

    css: [{
        selector: 'td.cell--selected, td.focused',
        rule: 'background-color: #FF4136;'
    }, {
        selector: 'td.cell--selected *, td.focused *',
        rule: 'color: #3C3C3C !important;'
    }]

The feature

There is currently no officially supported way to change the background-color of a selected or focused cell through the style_* properties. Create a new issue specifically for the feature. See #257.

This issue will be used for fixing the rendering bug in IE11 / Edge.

[srisar]

It would be awesome to have this feature, specially when we style the table with darker colors, the pink outline nor the light pink color inside the selected cell is barely visible.

[straumboi]

css: [{
        selector: 'td.cell--selected, td.focused',
        rule: 'background-color: #FF4136;'
    }, {
        selector: 'td.cell--selected *, td.focused *',
        rule: 'color: #3C3C3C !important;'
    }]

How do I add the code snippet to dash? I tried
app.css.append_css() and it did not work

[alexcjohnson]

@straumboi this is the css prop of the DataTable component, not standalone CSS.

[straumboi]

css= [{ 'selector': 'td.cell--selected, td.focused', 'rule': 'background-color: #FF4136;' }, { 'selector': 'td.cell--selected *, td.focused *', 'rule': 'color: #3C3C3C !important;'

I tried adding this to the table definition, it did not work unfortunately. Is there any other way to change the active cell colour?

[alexcjohnson]

You're so close - I see the desired color if I add !important to the first rule too - probably because the way we're applying these colors internally changed a good deal since this issue was created.

[swap00789]

Hello,

I would like to change the background color of the cell in a dash data-table if I make any changes to the cell,.

Is that possible?

Regards,
Swap

[gabri-al]

I've managed to change the hovering color and disabling the possibility to select a cell (end result is visibile here : https://corporate-dash.herokuapp.com. This is explained here: https://gabri-albini.medium.com/create-a-professional-dasbhoard-with-dash-and-css-bootstrap-e1829e238fc5)

tr:hover {
background-color: rgb(41, 56, 55) !important;
}

[tomgprice13]

Hi gar-al, thanks for your Medium article I've found it very useful in learning how to customise Plotly dashboards. Although I'm still having trouble with changing the colour of active items, mainly Radio Items. Do you know if this functionality works for items other than a table and on manually created CSS classes?

Thanks in advance.