I'm trying to add a footer to my Shiny application in which I can write some notes and version details, however, the I can't seem to get the footer in the desired position.
I'm using the class .sticky_footer
Please see CSS below:
/* 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;
}
I am then using tags$div(class = "sticky_footer", p("test footer")
within app.R which produces the following. The yellow box is where I want the footer to appear.
The code for the Shiny app is thus:
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")
)
)
))
I think the issue might be due to the placement of the sidebar panel which makes it appear as though the page is longer than it actually is but regardless, I need the footer to be positioned in line with the bottom of the sidebar panel.
Thanks in advance.