CODEWITHSUNDEEP
cssag-gridag-grid-react
FD3
FD3

Reputation: 1946

How to adjust AG Grid Table column width with the corresponding rows?

The problem appeared after adding drag and drop to the rows, which was working fine while adding the checkboxes.
First I tried to apply margin-left to the header checkbox wrapper div in Devtools and it worked, but after trying to implement the style with css classes, it applied the given style to all rows.
I assume, I am not targeting the correct classNames or maybe I need to make a use of cellStyles.
Here is the link for the sandbox
See the screenshot of current view

enter image description here

Targeting style correctly in devtools

enter image description here

enter image description here

Trying to do the same in code which doesn't work

.ag-wrapper .ag-input-wrapper .ag-checkbox-input-wrapper {
  margin-left: 27px !important;
}

Any help will be appreciated

Upvotes: 0

Views: 458

Answers (1)

FD3
FD3

Reputation: 1946

I was not targeting the correct className.
Here is the correct way of targeting, if anyone else is struggling with something similar.

.ag-header-cell:first-child {
  margin-left: 26px;
}

And working sandbox link

Upvotes: 1

Related Questions