10

I am just starting to use SlickGrid and amazed by its quality. However, when it comes to styling, I did not find any docs or examples recommending an overall styling approach. There are options and APIs scattered in various places, but it's very difficult to extract a strategy out of those. Also the grid leverages jQuery UI themes. Unfortunately those are interfering with what I am trying to achieve. We have picked up jQuery UI only for the calendar widget along with the ui-darkness theme. This theme works perfectly fine for the calendar widget, but the grid needs to override every aspect of it.

Here's a jsFiddle that shows the look I am trying to achieve: http://jsfiddle.net/nareshbhatia/3q6RD/. Just for illustration, it uses a regular HTML table. However I would like to achieve the exact same styling using SlickGrid. The CSS in this jsFiddle is essentially the requirement I have from my visual designer, e.g.

#positions-table th {
    background-color: #505050;
    color: #eeeeee;
    text-shadow: none;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
}

Edit: I also created a jsFiddle with a starter SlickGrid implementation: http://jsfiddle.net/nareshbhatia/vJshY/. As you can see, the ui-darkness theme has completely taken over!

Naresh
  • 23,937
  • 33
  • 132
  • 204

1 Answers1

7

Within your second/last jsFiddle you can modify the CSS to have this code

.slick-header-column.ui-state-default {
    background:none ;
    background-color: #505050 ;
    color: #eeeeee;  
    border: none;  
    padding: 0;
    text-shadow: none;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    height: 40px;
    line-height: 40px;    
}

.slick-row.ui-widget-content, .slick-cell {
    background: none;
    background-color: #eeeeee;
    color: #666666;
    border: none;
    border-bottom: solid 1px #ffffff;
    font-size: 14px;
    height: 60px;
    line-height: 60px;
    padding: 0 5px;
}
ghiscoding
  • 12,308
  • 6
  • 69
  • 112
  • Thanks @ghiscoding. This is working really well. Would be good to include this or similar example in the docs. On problem though. When I include these styles in my real project, the .slick-row class is being overridden about 60 times with a dynamic declaration like this : .slickgrid_357698 .slick-row { height: 30px; }. Note that the height is overidden to 30px, so the rows are squished. Any idea why this is happening? In your code, I see only one override, and it is with the same value (60px), so I am not seeing any issues. – Naresh Jun 24 '13 at 17:06
  • Ok, figured it out. In my real project I had options.rowHeight set to 30px. As soon as I changed that to 60px, the height is remaining at 60px. Still don't understand why SlickGrid is repeatedly setting .slickgrid_357698 .slick-row { height: 60px; }. – Naresh Jun 24 '13 at 18:30
  • it might depend where you have put your CSS code against the slickgrid CSS code, I mean which one is loaded at last? I am assuming whichever is the last code to be loaded will have precedence... now you can always try to put `!important` on that line, this will make sure it takes it all the time. `height: 60px !important;` – ghiscoding Jun 24 '13 at 18:45