Position du pied de page dans Shiny

Question

Je voudrais régler la position du pied de page dans une application brillante. Lorsque le contenu de la page est plus court que la fenêtre d'affichage, le pied de page doit se trouver en bas de la fenêtre d'affichage. Lorsque le contenu de la page est plus long que la fenêtre d'affichage, le pied de page doit se trouver sous le contenu. Ce site Ce billet suggère comment l'implémenter habituellement en CSS. Cette solution et d'autres solutions similaires sont généralement simples à utiliser lorsque vous écrivez le code HTML de la page à la main.

Il y a des discussions sur la position du pied de page dans shiny et certains parviennent à déplacer le pied de page vers le bas. Cependant, elles ne parviennent pas à empêcher le pied de page de chevaucher le bas du contenu principal de la page, ce qui nécessite de raccourcir le conteneur du contenu principal.

Considérons l'exemple de travail minimal suivant :

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

Il est possible d'avoir un pied de page comme vous le décrivez, mais ce n'est pas simple à mettre en œuvre. Il ne semble pas y avoir de fonction intégrée pour positionner le pied de page, et encore moins de la façon dont vous le souhaitez.

Nous devons donc écrire un CSS personnalisé. Pour ce faire, nous devons être en mesure de cibler le pied de page. Lorsque nous regardons le HTML produit par l'exemple, nous pouvons voir que le contenu spécifié par l'argument footer est simplement enveloppé dans un <div> avec la classe row .

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

Dans toute application brillante de taille raisonnable, il y aura de multiples <div> avec cette classe, ce qui rend difficile l'écriture d'un CSS ciblant uniquement le pied de page de manière fiable. Une solution de contournement est la suivante :

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

Il ne reste plus qu'à ajouter le CSS qui positionne le pied de page. J'utilise l'exemple trouvé sur le site Site web Bootstrap . Une façon d'intégrer ceci dans shiny est comme ceci :

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

En remplaçant l'interface utilisateur de l'exemple par l'interface utilisateur ci-dessus, vous obtiendrez le pied de page souhaité, qui se trouve au bas de la fenêtre d'affichage lorsque le contenu est court, mais sous le contenu lorsque celui-ci est plus long que la fenêtre d'affichage.

Answer 2

Je ne suis pas compétent en html, est-ce que le pied de page doit ressembler à ça ?

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)

Ou peut-être :

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)