You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support'
Current behavior
Having coloured text within a cell and using ag grid with flexboxes/grids means the colour will be affected when any input element on the page is selected
Expected behavior
Colour in cells stay the same
Please tell us about your environment:
Windows
AG Grid version: X.X.X
"ag-grid-community": "^31.3.1",
"ag-grid-react": "^31.3.1",
Although the bug doesn't occur in plunker, running this code locally will produce it. Whenever the text input on the top is clicked into, the red font in the grid cells becomes less bold. I have come across this issue in all forms of flexboxes, grids, MUI grid. This is a minimum reproducible example I came up with.
I couldn't find many posts about Ag Grid being incompatible with flex/grids so was quite surprised how prevalently I've come across this. Tweaking certain elements like the number of divs, etc appears to mutate the problem (certain cells stay coloured, while others don't anymore). I've also seen this issue when having an editable top pinned row, though interestingly I have not been able to reproduce with a bottom pinned row.
I've attached a gif of the occurrence below.
Forcing CSS states (active/focus) does not trigger the issue, and dev tools show no CSS changing
I am prevented from using multiple colourful grids in a single page w/ responsive design because of this - anyone having similar issues would be good to hear
Thanks!
The text was updated successfully, but these errors were encountered:
I can only imagine this works because of some sort of separation introduced in how the browser renders these elements due to the filter. It does lessen the intensity of the text but this can be amended with other properties.
I'm submitting a ... (check one with "x")
Current behavior
Having coloured text within a cell and using ag grid with flexboxes/grids means the colour will be affected when any input element on the page is selected
Expected behavior
Colour in cells stay the same
Please tell us about your environment:
Windows
AG Grid version: X.X.X
"ag-grid-community": "^31.3.1",
"ag-grid-react": "^31.3.1",
Browser:
Occurs in: Chrome, Edge
Doesn't occur in: Firefox
Language: [all]
Plunker: https://plnkr.co/edit/m4SclAllVRUzANOg?open=index.jsx
Although the bug doesn't occur in plunker, running this code locally will produce it. Whenever the text input on the top is clicked into, the red font in the grid cells becomes less bold. I have come across this issue in all forms of flexboxes, grids, MUI grid. This is a minimum reproducible example I came up with.
I couldn't find many posts about Ag Grid being incompatible with flex/grids so was quite surprised how prevalently I've come across this. Tweaking certain elements like the number of divs, etc appears to mutate the problem (certain cells stay coloured, while others don't anymore). I've also seen this issue when having an editable top pinned row, though interestingly I have not been able to reproduce with a bottom pinned row.
I've attached a gif of the occurrence below.
Forcing CSS states (active/focus) does not trigger the issue, and dev tools show no CSS changing
I am prevented from using multiple colourful grids in a single page w/ responsive design because of this - anyone having similar issues would be good to hear
Thanks!
The text was updated successfully, but these errors were encountered: