I am trying to build a Shiny Dashboard with a footer in the dashboardSidebar
, that is sticky to the bottom of the viewport. For this, I am trying to use custom CSS styling as suggested here (one of many search results when Googling "footer bottom bootstrap") :
# create an example for the SO question on sticky footer
library(shiny)
library(shinydashboard)
# sidebar
so_sidebar = dashboardSidebar(
sidebarMenu(
menuItem(
text = "Some text."
)
),
# footer here
tags$footer(
tags$p("Footer message here."),
style = "
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/"
)
)
# compose the dashboard
so_ui = dashboardPage(
header = dashboardHeader(
title = "SO question"
),
sidebar = so_sidebar,
body = dashboardBody()
)
# run the application
shiny::shinyApp(
ui = so_ui,
server = shinyServer(function(input, output) {})
)
Since I have never worked with custom CSS before, I am not sure I am using the CSS right. I am following the instructions here .
Can someone help with getting this CSS right, or with any other suggestions on a footer that is sticky to the bottom of the viewable area in the sidebar of a Shiny Dashboard?
Try this
<div>
Sticky Footer
</div>
div{
position:fixed;
bottom:0;
right:0;
left:0;
background:#00adfc;
padding:10px;
box-sizing:border-box;
}
Position fixed always stay at the specified position and gives a sticky feel.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.