Serenity: Customizing the Serenity Entity Grid row height (including cell contents)

Created on 26 Aug 2016 · 3Comments · Source: serenity-is/Serenity

I'm not sure if this is purely a SlickGrid issue, or Serenity is doing some sort of override.
I can't change the row height of the entity grid used by serenity, with the cell's data and input following suit. I've tried:

changing height by CSS of .slick-row, .slick-cell elements. The rows did not increase in height but the cell text and inputs went weird, like they're being hidden beneath their respective row's bottom border with only their top showing.
setting the rowHeight option in the grid constructor:
constructor(container: JQuery) { super(container); this.slickGrid.setOptions({ rowHeight: 50 }); }
The rows increased in height _but the cell text and inputs are still the same size._
Tried this: http://stackoverflow.com/questions/17262236/what-is-the-recommended-approach-to-style-a-slickgrid but still the same effect as number 2.

How do I customize the Serene grid row heights (make higher or smaller)? This is to accomodate font changes, and/or tapping area in mobile. Thanks.

Source

john20xdoe

Most helpful comment

There are several samples in Serene that changes row height. Proper way is to use getSlickOptions. That doesn't affect line height / editor height though, which should be set by css.

volkanceylan on 28 Aug 2016

👍3

All 3 comments

if you mean a word wrap content, this might be help https://github.com/volkanceylan/Serenity/issues/425.

cmiiw.

adhikamafran on 26 Aug 2016

@adhikamafran no, not word wrap.
I meant, from this:
grid 1

to this:
grid 2

Ok, so I was able to do it using rowHeight slickgrid option and css (all set to !important) to override the height set in a style block (containing slickgrids' heights) that appends to the <head> element. _I'm not sure what/where is the code that executes this._

in the typescript file for grid, I put rowHeight setting in the constructor:
this.slickGrid.setOptions({ rowHeight: 50 });
Then match it in the css/less in the next step.
Then in the custom .less file (loaded after Serene's), containing my own customizations:

.slick-row
{
    height: 50px !important;
    line-height: 50px !important;
    > * {
        height: 46px !important;
        line-height: 46px !important;
    }
}
.slick-cell{
    border-bottom: 0px !important;
    height: 50px !important;
    > * {
        height: 43px !important;
    }
}

Just customize the sizes as you need.
Displayed as intended for now in Chrome and IE 11. I'm not sure if it reflects in ALL the grids in all modules.

Hope this helps someone out there.

john20xdoe on 26 Aug 2016

There are several samples in Serene that changes row height. Proper way is to use getSlickOptions. That doesn't affect line height / editor height though, which should be set by css.

volkanceylan on 28 Aug 2016

👍3

Was this page helpful?

0 / 5 - 0 ratings