FlexGrid Cell Padding

FlexGrid Cell Padding

Posted by: jonathanstone711 on 7 April 2018, 9:10 am EST

• 

  jonathanstone711

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 April 2018, 9:10 am EST

  Hi

  I am currently evaluating the Wijmo 5 FlexGrid control within an Angular 2 project and need to show more Rows per screen than the default. I can set the Row height smaller than the default but then the content of that Row’s Cells is clipped. The clipping looks caused by vertical Padding around the Cell’s content. It would seem that much of a Row’s height is caused by Padding and the default level of vertical Padding seems excessive, hence I wish to reduce it.

  So my question is how can I change the Padding of a standard FlexGrid Cell?

  My assumption is that once the vertical Padding is reduced then the FlexGrid will automatically size the Rows with a smaller height than normal and hence more rows will be visible on the screen with me having to specifically set Row heights.

  Any help would be appreciated.

  Thanks

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 9 April 2018, 3:29 am EST

  Hi,

  You can style wijmo components by css.

  To remove cell padding add following css:-

  .```
  
  wj-cell{

  padding:0px;

  }

  
  
  Refer to following example:-
  
  https://stackblitz.com/edit/angular-skzzlv

• 

  jonathanstone711

  • Post Options:
  • Link
    Copy

  Posted 11 April 2018, 5:38 am EST

  Thank you. That works, although the padding style needed to have !important. Also it seems that the line-height style needs to be changed in order to vertically center the cell’s text.

  Thanks for your help.