Class to make wijmo table responsive

Class to make wijmo table responsive

Posted by: johnsdy779 on 22 June 2021, 7:27 am EST

• 

  johnsdy779

  • Post Options:
  • Link
    Copy

  Posted 22 June 2021, 7:27 am EST

  Hi Wijmo team,

  Can you please let use know how can we fit the wijmo table on page as per browser resolution.

  I tried it with media query it is working but not so properly? I am trying to change the height of cell in using media query

  .wj-cell{
      height:2.2em;
      padding-top: 0.4em;
    }
  

  So do you have some classes to make it better like bootstrap. Also we are using pagination. So what ever may be the page limit the table should appear properly in all the resolution.

  Can you please help

  Thanks

• 

  johnsdy779

  • Post Options:
  • Link
    Copy

  Posted 22 June 2021, 7:43 am EST

  ++ We have 15 rows per page , if we don’t add height to rows then the table looks very small so we added height like above. But it becomes hard to maintain in all the resolution.

  Please suggest a better solution.

• 

  johnsdy779

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 7:30 am EST

  Please provide solution for this

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 1:46 pm EST

  Hi,

  Wijmo cell height is not controlled by CSS but using the grid and rows properties. Therefore CSS media queries could not be used to set the row height. To have reactive row heights what we could do is use the media query to set height/width of the grid’s hostElement and handle the render event to control the row heights based on the grid’s hostElement height/width. You may refer to the following sample which demonstrates the same, in the sample, I’ve adjusted the row’s height based on the hostElement’s width, you may use criteria based on your requirement:
  
  https://codesandbox.io/s/wijmo-starter-forked-53vrz?file=/src/index.js
  
  If you resize the window then you will notice the difference in row heights.

  ~sharad