Shiny 中的頁腳 Position

Question

我想在 shiny 應用程序中調整頁腳 position。 當頁面內容比視口短時，頁腳應該在視口的底部。 當頁面內容長於視口時，頁腳應位於內容下方。 這篇文章建議了如何通常在 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

可以有一個像你描述的頁腳，但實現起來並不簡單。 似乎沒有內置的 function 到 position 頁腳，更不用說你想要的方式了。

所以，我們需要編寫一些自定義的 CSS。 為此，我們需要能夠定位頁腳。 當我們查看示例生成的 HTML 時，我們可以看到參數footer指定的內容簡單地包裝在帶有 class row的<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>

在任何大小合理的 shiny 應用程序中，都會有多個<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 網站上找到的示例。 將其集成到 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 將生成所需的頁腳，當內容短時，它會粘在視口的底部，但當內容長於視口時，它會在內容下方。

Answer 2

我不精通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)