固定 WellPanel 的宽度，与浏览器页面宽度无关答案

【问题标题】：Fixing Width of WellPanel irrespective of Browser page width固定 WellPanel 的宽度，与浏览器页面宽度无关
【发布时间】：2017-11-11 05:49:04
【问题描述】：

我根据以下代码创建了一个闪亮的仪表板：

library(shinydashboard)
library(shiny)

sidebar <- dashboardSidebar(

  sidebarMenuOutput("menu"),
  conditionalPanel("input.tabs == 'ABC'",
    fluidRow(
      column(11, offset = 1, h5((' Note')))
    )
  ),
  conditionalPanel("input.tabs == 'ABC1'",
    fluidRow(
      column(11, offset = 1, style = "height:20px; color:rgb(30,144,255);", h1((' Update')))
    )
  ))

body <- dashboardBody(
  tabItems(
    tabItem(tabName = "ABC1",br())

  ),
  tabItems(
    tabItem(tabName = "ABC",br(),

fixedRow(column(10, offset = 1, wellPanel()))


)

  )
)


ui = dashboardPage(
  dashboardHeader(title = "ABC"),
  sidebar,
  body
)

server = function(input, output){
  output$menu <- renderMenu({
    sidebarMenu(id="tabs",
      menuItem("ABC", tabName="ABC", icon=icon("line-chart"), selected=TRUE),
      menuItem("ABC1", tabName="ABC1", icon=icon("line-chart"))
    )
  })
}

shinyApp(ui = ui, server = server)

通过上述设置，如果我调整浏览器的大小，WellPanel 的宽度会发生变化。因此，当我在更大的屏幕（例如 2560 x 1080）中看到我的应用程序时，这看起来很难看。我希望 WellPanel 的整个尺寸保持固定。如果浏览器尺寸小于 WellPanel，那么会出现一些水平/垂直滚动条。如果更大，Wellpanel 将停留在浏览器的中上部分。

知道我上面的代码中需要更改什么设置来实现这一点。

谢谢，

【问题讨论】：

您可以在fluidRow() 中包含tags$head(tags$style(type = "text/css", '.well{width: 600px}')) 来固定宽度。但是，overflow:auto !important; 和 overflow:scroll !important; 都在为我工作，...也许我在晚上找到了一些东西，...
感谢您的洞察力。但它正在影响 App 中的所有 WellPanel。我只想要这样的固定宽度 WellPanel 用于“ABC”，而不是全部。其次，当我调整浏览器的大小时，受影响的 WellPanel 并没有完全移动到我的屏幕中心。是否需要进一步调整才能完成以上两项？
任何人都可以帮助我解决上述问题。谢谢，

标签： shiny shiny-server

【解决方案1】：

我认为这可行：

library(shinydashboard)
library(shiny)

sidebar <- dashboardSidebar(
  
  sidebarMenuOutput("menu"),
  conditionalPanel("input.tabs == 'ABC'",
                   fluidRow(
                     column(11, offset = 1, h5((' Note')))
                   )
  ),
  conditionalPanel("input.tabs == 'ABC1'",
                   fluidRow(
                     column(11, offset = 1, style = "height:20px; color:rgb(30,144,255);", h1((' Update')))
                   )
  ))

body <- dashboardBody(
  tags$head(tags$style(type = "text/css"
                       , '#plotUI {min-width: 570px; max-width: 570px;overflow:auto;}'
  )
)
  ,tabItems(
    tabItem(tabName = "ABC1",br())
    
  ),
  tabItems(
    tabItem(tabName = "ABC",br(),
            
            fluidRow(column(10, offset = 1
                            ,div(class="thiswell"
                            , wellPanel(
                                        style= "min-width: 600px;max-width: 600px;overflow:auto",
                                        ,uiOutput("plotUI")
                              
                            )
                            )
                            ) )
            
            
    )
    
  )
)

ui = dashboardPage(
  dashboardHeader(title = "ABC"),
  sidebar,
  body
)

server = function(input, output){
  output$menu <- renderMenu({
    sidebarMenu(id="tabs",
                menuItem("ABC", tabName="ABC", icon=icon("line-chart"), selected=TRUE),
                menuItem("ABC1", tabName="ABC1", icon=icon("line-chart"))
    )
  })
  
  output$plotUI<- renderUI({
    plotOutput("thePlot")
  })
  
  output$thePlot<- renderPlot({
    plot(1:10)
  })
  
}

shinyApp(ui = ui, server = server)

【讨论】：