R Shiny，dashboardSidebar 在切换时打破图表和表格宽度

Question

切换 dashboardSidebar 菜单时，图表和 tables（通过 R Shiny 制作）不会相应地调整它们的宽度。

这是一个带有标准图表和 table 的示例。初始化应用程序时，图形和 table 正确填充屏幕，但切换菜单会破坏两个元素的宽度。

如何解决这个问题，使它们的宽度始终为 100%？

library(shiny)
library(shinydashboard)
library(dygraphs)

ui <- dashboardPage(
    dashboardHeader(),

    dashboardSidebar(
        sidebarMenu(id = "menu_tabs",
            menuItem("Test", tabName = "page_1", icon = icon("table"), selected = TRUE)                
        )
    ),

    dashboardBody(    
        tabItems(      
            tabItem(tabName = "page_1",              
                fluidRow(
                    column(width = 12, offset = 0,
                        box(width = 12,
                            dygraphOutput("dy_plot", height = "310px")
                        )
                    )
                ),

                fluidRow(
                    column(width = 12, offset = 0,
                        box(width = 12,
                            dataTableOutput('mytable')
                        )
                    )
                )              
            )         
        )
    )
)

server <- function(input, output) {

    output$mytable = renderDataTable({
        mtcars
    },
    options = list(
        lengthMenu = c(30),
        pageLength = 30,
        searching = FALSE,
        paging = FALSE,
        ordering = FALSE,
        scrollX = TRUE))

    output$dy_plot <- renderDygraph({
        lungDeaths <- cbind(mdeaths, fdeaths)
        dygraph(lungDeaths)
    })
}

shinyApp(ui, server)

Answer 1

很多功劳归功于这个答案，您可以在其中强制调整大小

rm(list = ls())
library(shiny)
library(shinydashboard)
library(dygraphs)

ui <- dashboardPage(
  dashboardHeader(),

  dashboardSidebar(
    sidebarMenu(id = "menu_tabs",menuItem("Test", tabName = "page_1", icon = icon("table"), selected = TRUE)                
    )
  ),

  dashboardBody(    
    tags$script('
      // Bind function to the toggle sidebar button
      $(".sidebar-toggle").on("click",function(){
        $(window).trigger("resize"); // Trigger resize event
      })'
    ),
    tabItems(      
      tabItem(tabName = "page_1",              
              fluidRow(
                column(width = 12, offset = 0,
                       box(width = 12,
                           dygraphOutput("dy_plot", width = "100%", height = "310px")
                       )
                )
              ),

              fluidRow(
                column(width = 12, offset = 0,
                       box(width = 12,
                           dataTableOutput('mytable')
                       )
                )
              )              
      )         
    )
  )
)

server <- function(input, output) {

  output$mytable = renderDataTable({
    mtcars
  },
  options = list(
    lengthMenu = c(30),
    pageLength = 30,
    searching = FALSE,
    paging = FALSE,
    ordering = FALSE,
    scrollX = TRUE))

  output$dy_plot <- renderDygraph({
    lungDeaths <- cbind(mdeaths, fdeaths)
    dygraph(lungDeaths)
  })
}

shinyApp(ui, server)

Answer 2

实际上，这已在最新版本的 shinydashboard 中修复。只需从 CRAN 重新安装它：

install.packages("shinydashboard")

R Shiny，dashboardSidebar 在切换时打破图表和表格宽度

R Shiny, dashboardSidebar breaks graphs and tables width when toggling

javascript

r

shiny

dygraphs

shinydashboard