adapt the height of the spreadsheet

2 posts, 0 answers
  1. Joaquin
    Joaquin avatar
    2 posts
    Member since:
    Sep 2013

    Posted 06 Jun 2019 Link to this post


    By default the spreadsheet has a height that it's way too small for my excel sheet. Half of my webpage is just blank space with a tiny box with the spreadsheet.

    How can I make it taller? I tried div style height:100% but that didn't work. Also hardcoding it on px may not be a good idea since everyone has a different screen.

    Ideally it should be the height of the latest visible excel row.


    1) Can I make it so it goes full screen (all area of the web page)?

    2) Even better, can I make it so that it goes to the height of certain row position? Like if I want to make it all visible without scrolling the component up to row 100 for instance.


  2. Martin
    Martin avatar
    311 posts

    Posted 10 Jun 2019 Link to this post

    Hello Joaquin,

    In order to set the spreadsheet's height to 100%, you also need to set this attribute to the html, body and the wrapper (if any) elements - for a height in percentage to work on an element, all its parent elements must have a height defined:
      html, body, div#example, div#spreadsheet{
        padding: 0;
        box-sizing: border-box;

    This is how you can make the widget's height to match the web page's. Here is a Dojo example for reference.

    If you want to set the height to a specific row, you can only do this by hardcoding the rowHeight and the sheets.rows.height. But as this isn't appropriate for your scenario, I suggest sticking to the first approach.

    Don't hesitate to contact us if you have further questions.

    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top