时间戳

首页 > 解决方案 > 如何在使用 navbarpage 的 Shiny App 中使用 html 自动将元素移动到页面/视图的底部？

html - 如何在使用 navbarpage 的 Shiny App 中使用 html 自动将元素移动到页面/视图的底部？

问题描述

我正在为我的 Shiny 应用程序使用导航栏页面。我想要一个元素，在我的例子中是一个 h2 标题元素，自动移动到侧边栏面板的底部。我知道通过将 float 属性应用于 h2 元素标题，我可以在侧边栏面板的左侧或右侧产生我想要的效果。但是，我还没有找到一种方法来产生类似的效果来自动将 h2 元素移动到页面/视图的底部。任何指向正确方向的指针都受到高度赞赏。

我试过添加跨度，但我没有让它工作。

library(shiny)
library(shinyWidgets)

if (interactive()) {

  ui <- navbarPage(
    title = "SIMULATION",
    id = "tabs",
    selected = "HOME",
    tabPanel(
      "HOME",
      sidebarLayout(
        sidebarPanel(
          width = 4,
          h2("Standard Normal Distribution Simulation"),
          numericInput("num", label = "Enter the number of observations", value = 100),
          actionButton("calc", "Draw Plot", icon = icon("calculator")),
          h2("Created with Shiny", style = "color:green; float:right;")
        ),
        # paste0(h1("Plot of Normal Distribution:"), h2("mean: std:")),
        mainPanel(
          h1("Plot of Standard Normal Distribution"),
          plotOutput("sim")
        ) # mainPanel
      ) # sidebar layout
    ) # tab panel
  )

  server <- function(input, output, session) {

    output$sim <- renderPlot({
      if (input$calc == 0){
        return()
      }
      isolate({
        # Plot of Random Points
        vals <- rnorm(input$num)
        plot(density(vals), main = "Normal Distribution")
      })
    })
  }
  shinyApp(ui, server)
}

标签： htmlrshiny

解决方案

基本上你可以先看看这是如何在没有闪亮的 HTML 中完成的：如何将我的 div 定位在其容器的底部？.

在那里你可以看到你需要一个容器来定位元素。您可以尝试使用现有元素之一，也可以创建一个新元素div以避免弄乱当前设置。

我选择创建一个新容器：

div(style = "height:800px; position:relative;", ... )

我在那里定位底部元素：

div(style = "position: absolute; bottom: 0;", 
          h4("I am at the bottom of a 800px div container.")

可重现的代码：

library(shiny)

ui <- navbarPage(
  title = "SIMULATION",
  id = "tabs",
  selected = "HOME",
  tabPanel(
    "HOME",
    div(style = "height:800px; position:relative;",
        sidebarLayout(
          sidebarPanel(
            width = 4,
            h5("Sidebar Panel")
          ),
          mainPanel(
            h5("Main Panel")
          ) # mainPanel
        ),
        h4("I am at the bottom right of a height:800px div container.", 
            style = "position: absolute; bottom: 0;right:0;")
    )
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

推荐阅读