This is a migrated thread and some comments may be shown as answers.

adapt the height of the spreadsheet

1 Answer 105 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Joaquin asked on 06 Jun 2019, 11:37 AM


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.


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 10 Jun 2019, 10:53 AM
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.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question