Height issue

[thomasthomasth]

Hey,

I believe that rhandsontable does not handle automatic resizing correctly when it comes to defining its height. I would like to have an rhandsontable object shown in a Shiny application in a way that it resizes automatically - based on the window size.

I tried a couple of things actually:

• tags$head(tags$style(".rhandsontable{height: calc(100vh - 160) !important;}"))

This makes the table to resize automatically - but the horizontal scroll bar is shown at the end of the table - right after the last row. This is not good.

If I create a div container where the rhandsontable object is nested, and then I set the rhandsontable object's height to 100% then it does not do anything. I shows the whole table instead.

When I predefine the height of the table in pixels, then the horizontal bar appears just fine. This may may be a htmlwidgets issue then, but I am not certain.

I am using the navbarPage module from the shiny package - so there is no conflict with the shinydashboard package.

Thanks in advance,

Tamas

Edit: Ok, if I use

• tags$head(tags$style(".handsontable{height: calc(100vh - 160) !important;}"))

then it basically does what I wanted to achieve. However, there are performance issues in the browser - even if I do not resize the window at all. I becomes super-slow if I the automatic resizing this way.

Any idea how to overcome this?

[jrowen]

Automatic resizing has long been an issue and could definitely use some attention.

[Paul-A-Kavan]

There's an old handsontable guide, here, to sizing that suggests the following:

1. Fixed width and height
2. Fixed height only (not sure if this is implemented)
3. Fixed width only
4. No width and no height provided
5. Passable javascript from R (not from the mentioned source)

I've included 5 because I have come across use cases in my work where the table needs to adjust inside a flexdashbard but requires jquery to get the height of the surrounding elements to keep the dashboard fitting in a window. In these cases, if we don't allow for JS code to be passed as a string then we are forcing the user to make manual changes to the rhandsontable code in their local library which makes their code difficult to maintain in the future. @jrowen Any thoughts on these sizing approaches?

[D3SL]

Huge gravedig but I semi-solved this using the below javascript in ui.r to grab the user's viewport dimensions and then pass them as input$dimension to server.r. It's still hacky because it doesn't seem to behave as expected, height=(input$dimension[1]*.45) doesn't automatically size the table to 45% of the viewport dimensions. I'm not sure if that's because I'm using display scaling in windows or something else.

edit: However I've discovered this comes at a steep cost, whenever the resizing occurs the table will reset itself back to its original state when first loaded and also trigger hot_to_r erroneously.

'
  var dimension = [0, 0];
  $(document).on("shiny:connected", function(e) {
      dimension[0] = window.innerWidth;
      dimension[1] = window.innerHeight;
      Shiny.onInputChange("dimension", dimension);
  });
  $(window).resize(function(e) {
      dimension[0] = window.innerWidth;
      dimension[1] = window.innerHeight;
      Shiny.onInputChange("dimension", dimension);
  });
'