adapt the height of the spreadsheet

[Joaquin]

Hi

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.

so:

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.

 

[Martin]

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:

<style>
  html, body, div#example, div#spreadsheet{
    padding: 0;
    margin:0;
    height:100%;
    box-sizing: border-box;
  }
</style>

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.

Regards,
Martin
Progress Telerik