闪亮的布局：使用可滚动面板和保持固定的面板构建闪亮的页面答案

【问题标题】：shiny layout: Build a shiny page with a scrollable panel and a panel that remains fixed闪亮的布局：使用可滚动面板和保持固定的面板构建闪亮的页面
【发布时间】：2020-06-26 20:33:24
【问题描述】：

我想用以下layout 构建一个shiny 面板：

黄色面板是显示绘图的地方，如果生成了多个绘图并且无法在页面上查看，则应该可以滚动。绿色面板应该几乎就像页面上的页脚一样，并且即使黄色面板滚动也是固定的。

到目前为止，这是我的代码。我设法获得了蓝色、黄色和绿色面板，但不确定如何使内容可滚动和固定。

data <- mtcars

ui <- fluidPage(
  tags$head(
    tags$style(HTML("body, pre { height: 100%}")),
    tags$style("#panel1 {background: green; height: 100%; position: fixed}"),
  ),

  fluidRow(id='row1',
    column(2,id='panel1',
      selectizeInput(inputId= "obs", label= "Obs", 
                     choices= names(mtcars), 
                     selected= names(mtcars)[1],
                     multiple=F),
      selectizeInput(inputId= "sublevel", label= "Sublevel", 
                     choices= sort(unique(mtcars$cyl)), 
                     selected= sort(unique(mtcars$cyl))[1],
                     multiple=F)
    ),
    column(10, id='panel2',offset = 2,
           fluidRow(tableOutput("tab")),
           fluidRow(textOutput("hi"))
    )
  )
)

server <- function(input, output){
  sorted <- reactive({data %>% arrange_(input$obs) %>% filter(cyl == input$sublevel)})
  output$tab= renderTable(sorted())
  output$hi<-renderPrint(paste0("hello"))
}

shinyApp(ui = ui, server = server)

Any help is very much appreciated.

【问题讨论】：

也许使用 iframe 作为黄色面板，例如 this?

标签： shiny layout css r layout shiny shinyapps

【解决方案1】：

给你。

重点是：

使用absolutePanel设置左、右、上、下位置；
使用height和width限制框；
在 CSS 中，使用 overflow: auto; 作为黄色框来滚动扩展元素

data <- mtcars

ui <- fluidPage(
    tags$head(
        tags$style("html, body { height: 100%; width: 100%}"),
        tags$style("#panel1 {background: #ADD8E6; height: 100px; position: fixed}"),
        tags$style("#panel2 {
            overflow: auto;
            background: orange;
            margin-left: 5px;
        }"),
        tags$style("#panel3 {background: green}")
    ),
    absolutePanel(id = "panel1",
                  height = "100%", width = "20%", right = "80%",
                  selectizeInput(inputId= "obs", label= "Obs", 
                                 choices= names(mtcars), 
                                 selected= names(mtcars)[1],
                                 multiple=F),
                  selectizeInput(inputId= "sublevel", label= "Sublevel", 
                                 choices= sort(unique(mtcars$cyl)), 
                                 selected= sort(unique(mtcars$cyl))[1],
                                 multiple=F)
    ), 
    absolutePanel(id = "panel2", 
                  top = "0%", left = "20%", height = "80%", width = "80%", right = "0%",bottom = "20%",
                  fluidRow(tableOutput("tab")),
                  HTML("<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                         <br><br><br><br><p>sdsdsd</p>"),
                  fluidRow(textOutput("hi"))

    ),
    absolutePanel(id = "panel3",
                  top = "80%", left = "20%", height = "20%", width = "80%", right = "0%",bottom = "0",
                  p("haha")
    )
)

server <- function(input, output){
    sorted <- reactive({data %>% arrange_(input$obs) %>% filter(cyl == input$sublevel)})
    output$tab= renderTable(sorted())
    output$hi<-renderPrint(paste0("hello"))
}

shinyApp(ui = ui, server = server)

【讨论】：