滚动条太多 Shiny rhandsontable

Question

I'm using rhandsontable with dqshiny to display a large table in an app.

I put some code below. In this code, there are maybe 4 scroll-bars. 2 in the table and 2 on the outer page.

I only want 2 scroll-bars, can someone help? I have been messing with the CSS for hours to try and get the filters to show but also have scrollbars.

library(shiny)
library(rhandsontable)
library(shinythemes)
library(shinyjs)
library(dqshiny)

df = data.frame(hello1 = seq(100), stringsAsFactors = FALSE)
df2 = df
for(i in 1:30){
    df = cbind(df, df2)
}
names(df) = paste0(names(df), seq(20))

shinyApp(
    ui = fluidPage(
        theme = shinytheme("cerulean"), 
        navbarPage("sample Rhandsontable Page", selected = "tab01", 
            id = "navbar",
            position = "fixed-top", 
            tags$style(type="text/css", "body {padding-top: 70px;}"),
            tags$head(
                tags$style(
                    #"body {overflow-y: scroll;}"
                    "body {overflow: visible;}"
                )                 
            ),
            tags$head(
                tags$style(type = "text/css", ".container-fluid {padding-left:0px;
                    padding-right:0px; margin-right:0px; margin-left:0px;}")
            ),
            useShinyjs(),
            tabPanel("tab01",
                tags$head(tags$style("#randomTable-filters {overflow:visible !important;}")),
                tags$style('#randomTableTags * { white-space: nowrap}'), 
                tags$style('.shiny-html-output * {width = 100% }'),         
                div(id='randomTableTags', style="overflow: visible;",
                    dq_handsontable_output("randomTable")
                )
            )
        )
    ),
    server = function(input, output, session) {
        dq_render_handsontable(
            "randomTable", 
            df,
            filters = "T",
            page_size = c(500L, 1000L), 
            width_align = TRUE,
            horizontal_scroll = FALSE,
            table_param = list(highlightRow = TRUE, autoColumnSize = TRUE),
        )
    }
)

here is an image of the output:

If you have trouble with dqshiny, you can run:

library(devtools)
devtools::install_github('daqana/dqshiny', upgrade = 'always')

Answer 1

Solution 1: You can add this in your css file. It should be applicable to all handsontable in your app.

.handsontable {
    overflow: hidden;
}

Solution 2: You can use stretcH in your code to avoid extra scroll bars.

rhandsontable(data,stretchH = "all",stretchV = "all")