R Shiny，dashboardSidebar 在切换时会破坏图表和表格的宽度答案

【问题标题】：R Shiny, dashboardSidebar breaks graphs and tables width when togglingR Shiny，dashboardSidebar 在切换时会破坏图表和表格的宽度
【发布时间】：2017-10-26 05:37:04
【问题描述】：

在切换仪表板侧边栏菜单时，图形和表格（通过 R Shiny 制作）不会相应地调整它们的宽度。

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

如何解决这个问题，使其宽度始终为 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)

【问题讨论】：

标签： javascript r shiny dygraphs shinydashboard

【解决方案1】：

非常感谢这个答案Shiny dashboard does not scale well，您可以在其中强制调整大小

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)

【讨论】：

【解决方案2】：

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

install.packages("shinydashboard")

【讨论】：