Override default CSS. Specifically for Panel Grid row/cell height

[BMDUSA]

I can use Chrome to find and modify the CSS class that controls the grid cell height (see change to 35px on attachment), but I cannot figure out to override the class(?) for an individual grid. We have our own stylesheet, but any class addition to the stylesheet, say .custom-grid-cell .x-grid-cell {height:35px;}, does not override the cell height. I've tried the cls config and the viewConfig getRowCls option, but neither worked. Basically, the code needed to override the cell/grid row height on any individual grid.

I'm not a whiz at CSS, so I think I need to know:
1) Where in the MVC structure (below valence.css in the index.html?) to put our custom CSS
2) How the class in our custom CSS would be coded
3) How the config (if any) would be coded.

[sean.lanktree]

Are you already pulling in your own custom css file into the application? Also, what version of Ext are you using?

[BMDUSA]

Yes, we are pulling in our own custom css (see attached). We are on version 4.1

[sean.lanktree]

OK, assuming that you only want to change one of the grids in your application:

• Use the "cls" config on the grid and pass it a value of "my-grid" (you can come up with a better name)
• Add the following in your custom css file

.my-grid .x-grid-cell-inner{
   padding : 1px 2px 3px 1px;                       // you can adjust this to whatever you like
}

[BMDUSA]

Thanks, that worked! I'm not sure what I was doing wrong before, but problem solved. :D