Невозможно исправить местоположение нижнего колонтитула в приложении RShiny, используя CSS

Question

Я пытаюсь добавить нижний колонтитул в мое приложение Shiny, в котором я могу написать некоторые заметки и сведения о версии, однако я не могу получить нижний колонтитул в нужном положении. Я использую класс .sticky_footer

Пожалуйста, смотрите CSS ниже:

/* Container holding the image and the text */
.container {
  position: relative;
  width: 1250px;
  height: 300px;
  right: 15px;
}

/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 20px;
  left: 30px;
  background-color: rgba(0, 0, 0, 0.3); 
  font-family: 'Ubuntu', sans-serif;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.jag-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.sticky_footer { 
  position:relative; 
  bottom:0; 
  right:0; 
  left:0; 
  background:#3c8dbc; 
  z-index: 1000; 
  opacity: 0.9; 

}

Затем я использую tags$div(class = "sticky_footer", p("test footer") в app.R, который выдает следующее. В желтом поле я хочу, чтобы появился нижний колонтитул.

Код приложения Shiny:

  sidebarLayout(
    sidebarPanel(
      code("To begin using the calculator, please enter the required information below:"),
      tags$p(),

      column(width = 12, authDropdownUI("auth_dropdown", 
                                        inColumns = FALSE)),


        textInput("text", label = h5(strong("Page to be tested")), value = "Enter full page URL..."),

    hr(),
    fluidRow(column(3, verbatimTextOutput("value")
    )
    ),


    sliderInput("upliftInput", "Select Desired Uplift", min = 1, max = 10,
                value = 2, post = "%"),

    actionButton("exe", "Run Calculator", 
                 style="color: #fff; background-color: #337ab7; border-color: #2e6da4")


    ),



  mainPanel(
    plotlyOutput("trend_plot"),
    tags$div(class = "sticky_footer", p("test footer")
        )
    )
  ))

Я думаю, что проблема может быть связана с размещением боковой панели, из-за которой она выглядит так, как будто страница длиннее, чем она есть на самом деле, но независимо от того, нужно, чтобы нижний колонтитул располагался на одной линии с нижней частью боковой панели.

Заранее спасибо.

Answer 1

Использование absolutePanel (с соответствующими аргументами) создает HTML следующим образом:

<div style="right:0px;bottom:0px;position:fixed;cursor:inherit;">Here is a footer</div>

Вы можете добавить дополнительный стиль CSS, поместив свой собственный div внутрь.

Представление:

library(shiny)

ui <- fluidPage(
  titlePanel("Here's a title"),
  sidebarLayout(
    sidebarPanel(lapply(letters, br)),
    mainPanel(
      h1("This is a heading"),
      h5("Some more text goes here."),
      absolutePanel("Here is a footer", bottom = 0, right = 0, fixed = TRUE)
    )
  )
)

shinyApp(ui, function(...){})