Skip to content

rhandsontable expands infinitely horizontally #438

@samclayton23

Description

@samclayton23

When I create an rhandsontable table next to a graph in my RShiny application in the following way where they are side by side in separate columns then I get an issue where the table expands horizontally infinitely, underlapping the graph.

column(
                width = 12,
                fluidRow(
                  column(
                    width = 12,
                    tags$div(
                      tags$hr()
                    )
                  ),
                  column(
                    width = 6,
                    tags$style(".card { box-shadow: none !important; }"), # .card-body { padding: 0 !important; }
                    bs4Dash::bs4TabCard(
                      width = 12,
                      collapsible = FALSE,
                      id = ns("outputTables"),
                      tabPanel(
                        title = "Balance Table",
                        value = "balanceTableTab",
                        fluidRow(
                          column(
                            width = 12,
                            tags$div(rhandsontable::rHandsontableOutput(outputId = ns("balanceTable")), 
                                     style = "margin-right: 5px !important;")
                          )
                        )
                      ),
                      tabPanel(
                        title = "Long Table",
                        value = "longTableTab",
                        fluidRow(
                          column(
                            width = 12,
                            tags$div(rhandsontable::rHandsontableOutput(outputId = ns("longTable")), 
                                     style = "margin-right: 5px !important;")
                          )
                        )
                      ) # Close "Summary Graph" tabPanel
                    )
                  ),
                  column(
                    width = 6,
                    bs4Dash::bs4TabCard(
                      width = 12,
                      # height = 500,
                      collapsible = FALSE,
                      id = ns("outputGraphs"),
                      dropdownMenu = bs4Dash::cardDropdown(
                        bs4Dash::cardDropdownItem(
                          tags$label("Apply Discount Rate", `for` = ns("viewDiscountedValues")),
                          shiny::checkboxInput(
                            inputId = ns("viewDiscountedValues"),
                            label = NULL, 
                            value = FALSE
                          )
                        ),
                        bs4Dash::cardDropdownItem(
                          tags$label("Group costs/income", `for` = ns("groupVariables")),
                          shiny::checkboxInput(
                            inputId = ns("groupVariables"),
                            label = NULL, 
                            value = TRUE
                          )
                        ),
                        bs4Dash::cardDropdownItem(
                          tags$label("View Net Balance", `for` = ns("viewNetBalance")),
                          shiny::checkboxInput(
                            inputId = ns("viewNetBalance"),
                            label = NULL, 
                            value = TRUE
                          )
                        ),
                        icon = tags$i(class = "fa fa-wrench", "role" = "img", "aria-label" = "Settings")
                      ),
                      tabPanel(
                        title = "Cumulative Graph",
                        value = "cumulativeGraphTab",
                        fluidRow(
                          column(
                            width = 12,
                            tags$div(shiny::plotOutput(outputId = ns("cumulativeGraphPlot"), height = 600, width = "100%"), 
                                     style = "margin-right: 5px !important;")
                          )
                        )
                      ),
                      tabPanel(
                        title = "Bar Graph",
                        value = "barGraphTab",
                        fluidRow(
                          column(
                            width = 12,
                            tags$div(shiny::plotOutput(outputId = ns("barGraphPlot"), height = 600, width = "100%"), 
                                     style = "margin-right: 5px !important;")
                          )
                        )
                      ),
                      tabPanel(
                        title = "Comparative Income",
                        value = "compIncomeGraphTab",
                        fluidRow(
                          column(
                            width = 12,
                            tags$div(plotly::plotlyOutput(outputId = ns("compIncomeGraphPlot"), height = 600, width = "100%"), 
                                     style = "margin-right: 5px !important;")
                          )
                        )
                      )
                    )
                  ),
                  column(
                    width = 12,
                    tags$div(
                      tags$hr()
                    )
                  )
              )
            )

For reference, this is how I'm creating the balanceTable:

balanceTable <- rhandsontable::rhandsontable(data = balanceTable_data_final,
                                                 rowHeaders = NULL,
                                                 overflow = "visible",
                                                 stretchH = "all")

If I remove the overflow="visible" setting then the scroll bar is introduced which prevents this from occurring, however, I would like the table to be displayed in full.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions