闪亮的页脚位置

Question

我想在闪亮的应用程序中调整页脚位置。当页面内容比视口短时，页脚应位于视口的底部。当页面内容长于视口时，页脚应位于内容下方。 This post 建议通常如何在 CSS 中实现它。手动编写页面的 HTML 代码时，通常可以直接使用此解决方案和类似的解决方案。

有关于 shiny 中页脚位置的讨论，其中一些设法将页脚移动到底部。但是，它们无法防止页脚与页面主要内容的底部重叠，这需要缩短主要内容的容器。

考虑以下最小工作示例：

library(shiny)

ui <- navbarPage(title = "Some Example", id = "example",
    tabPanel(title = "Something", value = "something",
        textOutput("some_text")
    ),
    footer = "The footer."
)

server <- function(input, output, session) {
    output$some_text <- renderText(stringi::stri_rand_lipsum(5))
}

shinyApp(ui = ui, server = server)

Answer 1

我不精通html，页脚需要这样吗？

library(shiny)

ui <- navbarPage(title = "Some Example", id = "example",
                 tabPanel(title = "Something", value = "something",
                          textOutput("some_text"),
                          ##add a footer with 2 empty lines and the info to display
                          tags$footer(HTML('
                          <br>
                          <br>
                          <p>Author: Your Name<br>
                          <a href="mailto:your_name@example.com">your_name@example.com</a></p>'))
                 )
                 
)

server <- function(input, output, session) {
    output$some_text <- renderText(stringi::stri_rand_lipsum(15)) #change this number (15) to view how the footer reacts
}

shinyApp(ui = ui, server = server)

或者也许：

library(shiny)

ui <- navbarPage(title = "Some Example", id = "example",
                 tabPanel(title = "Something", value = "something",
                          textOutput("some_text"),
                          
                 
#add some empty lines to avoid overlap at the bottom    
tags$div(HTML('   <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <div class="footer">
                    <p>Author: Your Name<br>
                    <a href="mailto:your_name@example.com">your_name@example.com</a></p>
                  </div>')),
                  tags$style('
                  .footer {
                   position: fixed;
                   left: 0;
                   bottom: 0;
                   width: 100%;
                   background-color: lightgrey;
                   color: white;
                   text-align: right;}')),

tabPanel(title = "no_footer", value = "something",
         textOutput("some_text2")))

                 
                 


server <- function(input, output, session) {
    output$some_text <- renderText(stringi::stri_rand_lipsum(15)) #change this number (15) to view how the footer reacts
    output$some_text2 <- renderText(stringi::stri_rand_lipsum(5))
}

shinyApp(ui = ui, server = server)

Answer 2

像您描述的那样有一个页脚是可能的，但实现起来并不简单。似乎没有内置的功能来定位页脚，更不用说按照你想要的方式了。

所以，我们需要写一些自定义的 CSS。为此，我们需要能够定位页脚。当我们查看示例生成的 HTML 时，我们可以看到参数 footer 指定的内容只是用 class [=15] 包裹在 <div> 标记中=].

      <div class="container-fluid">
        <div class="tab-content" data-tabsetid="6611">
          <div class="tab-pane active" data-value="something" id="tab-6611-1">
            <div id="some_text" class="shiny-text-output"></div>
          </div>
        </div>
        <div class="row">The footer.</div>
      </div>
    </body>
    </html>

在任何大小合理的闪亮应用程序中，都会有多个 <div> 带有此 class，这使得编写 CSS 可靠地仅针对页脚变得困难。解决方法如下：

    ui <- tagList(navbarPage(
      title = "Some Example",
      id = "example",
      tabPanel(
        title = "Something",
        value = "something",
        textOutput("some_text")
      )),
      tags$footer("The footer.", class = "footer")
    )

现在剩下要做的就是添加 CSS 来定位页脚。我使用在 Bootstrap website 上找到的示例。将其集成到 shiny 中的方法如下：

    ui <- tagList(
      tags$head(
        tags$style(HTML(
          "html {
             position: relative;
             min-height: 100%;
           }
           body {
             margin-bottom: 60px; /* Margin bottom by footer height */
           }
           .footer {
             position: absolute;
             bottom: 0;
             width: 100%;
             height: 60px; /* Set the fixed height of the footer here */
             background-color: #f5f5f5;
           }"))),
      navbarPage(
      title = "Some Example",
      id = "example",
      tabPanel(
        title = "Something",
        value = "something",
        textOutput("some_text")
      )),
      tags$footer("The footer.", class = "footer")
    )

将示例中的 UI 替换为上面的 UI 将生成所需的页脚，该页脚在内容较短时贴在视口底部，但在内容较短时位于内容下方比视口长。

闪亮的页脚位置

Footer Position in Shiny

css

r

shiny

css-position

footer