闪亮的布局：构建一个闪亮的页面，其中包含一个可滚动的面板和一个保持固定的面板

Question

我想建一个 shiny panel with the following layout:

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

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

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.

Answer 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)

闪亮的布局：构建一个闪亮的页面，其中包含一个可滚动的面板和一个保持固定的面板

shiny layout: Build a shiny page with a scrollable panel and a panel that remains fixed

css

layout

r

shiny

shinyapps