Search code examples
csscellmarginpaddingng-grid

Ng-grid get rid of cell padding

So far I have tried to change the cell padding to 0, but ng-grid wants it to be 5 pixels. I originally made a css class called test with the following definition

test {
    padding:0;
}

then i figured out that ng-grid is overriding it with the class called ngCellText so the only way to overwrite inline css is to add important

test{
    padding:0 !important;
}

and this didn't work either. By the way my jade (no bracket html)(it also has a little bootstrap) looks like this

div.test
    div.row-fluid.span12
        div(my ng-grid document)

so then, since that didn't work, I looked at cellTemplate. Here is the default html for it

<div class="ngCellText ng-scope col0 colt0 (**input test class here**)" 
ng-class="col.colIndex()">
<span ng-cell-text="" class="ng-binding">***0***</span>
</div>

This is great and it gets rid of the padding, but as you can see "0" is hardcoded since this if from an inspected element using chrome. How would I be able to do this using my ng-grid field? Also, if you have any other ideas on how to fix this please feel free on pitching in. Preferably I would like to get the !important working or anything else since the way I have ng-grid set up is so I can put it in different places of my website so custom css would be best!

Solution

  • This can help:

    div.ngCellText[class*="col"] {
   padding: 0;
}

    But seems you can just override it like this:

    .ngCellText {padding: 0;}