Shiny Dashboadpage lock dashboardHeader on top
AdminLte (the framework used by shinydashboard) had a fixed layout (see here), you can activate it in your app by putting this line somewhere in your UI :
tags$script(HTML("$('body').addClass('fixed');"))
(in dashboardBody for example)
Note : This will apply a fixed layout to the header AND the sidebar.
Locking R shiny dashboard sidebar (shinydashboard)
You should just add the style = "position:fixed; overflow: visible" at the ui sidebar.
library(ggplot2) ## for mpg dataset
library(shinydashboard)
## ui
ui <- dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(style = "position: fixed; overflow: visible;",
menuItem("MPG", tabName="mpg"))),
dashboardBody(
tabItems(
tabItem(tabName="mpg",
fluidRow(tableOutput("mpgTable"))))))
## server
server <- function(input, output) {
output$mpgTable <- renderTable({mpg})
}
## launch dashboard
shinyApp(ui, server)
Remove border lines in R shiny dashboard's main header
Following Customizing dashboard apperance you could remove the border for you logo and the sidebar toggle like so:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
skin = "black",
dashboardHeader(
tags$li(
class = "dropdown",
tags$style(
".main-header {max-height: 75px}",
".main-header .logo {height: 75px}",
".main-sidebar .sidebar .sidebar-menu .active a{
background-color: #003A68;
}",
".main-sidebar .sidebar{
background-color: #005BA5;
}",
)
),
titleWidth = 350,
title = tags$a(tags$image(src = "Gilbert Logo.png"))
),
dashboardSidebar(
width = 350,
sidebarMenu(
id = "tab",
div(class = "inlay", style = "height:25px;width:100%;background-color: #ecf0f5"),
menuItem("Inputs", icon = icon("sliders-h"))
)
),
dashboardBody(
tags$head(tags$style(HTML('
.skin-black .main-header>.logo {
border-right: 0px;
}
',
'.skin-black .main-header .navbar>.sidebar-toggle {
border-right: 0px;
}')))
)
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
Shinydashboard: collapse main-header-title together with sidebar
The shinydashboardPlus allows you to partially collapse the sidebar and the header. Simply change the dashboardPage to dashboardPagePlus and dashboardHeader to dashboardHeaderPlus. Leave everything the same and you will be able to collapse the header as well.
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPagePlus(
dashboardHeaderPlus(title = "Toggle this!"),
dashboardSidebar(),
dashboardBody()
)
server <- function(input, output) { }
shinyApp(ui, server)
However, it does not fully collapse the header nor the sidebar. It leaves some space to show icons, which is useful. But if you want to fully collapse the header and the sidebar you need to use JavaScript. Sidenote: dashboardPagePlus has an argument collapse_sidebar, which when set to TRUE will fully collapse the sidebar, however, the header stays in place. To move both completely, use the following code below.
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
jscode <- HTML("
$(document).on('shiny:connected', function(event) {
$('.sidebar-toggle').on('click', function() {
if ($('body')[0].className != 'skin-blue sidebar-mini sidebar-collapse') {
$('#sidebarCollapsed').css('display', 'none')
$('nav.navbar-static-top').css('width', '1800px')
$('nav.navbar-static-top').css('margin-left', '0px')
$('header.main-header').css('width', '1800px')
$('.sidebar-toggle').css('position', 'relative')
$('span.logo').css('display', 'none')
} else {
$('#sidebarCollapsed').css('display', 'block')
$('nav.navbar-static-top').css('margin-left', '230px')
$('header.main-header').css('width', '884.44px')
$('nav.navbar-static-top').css('width', '1800.44px')
$('span.logo').css('display', 'block')
}
})
});
")
csscode <- HTML("
.sidebar-mini.sidebar-collapse .content-wrapper {
margin-left: 0px !important;
}")
ui <- dashboardPagePlus(
dashboardHeaderPlus(title = "Toggle this!"),
dashboardSidebar(collapsed = TRUE,
tags$head(tags$script(jscode)),
tags$head(tags$style(csscode))
),
dashboardBody()
)
server <- function(input, output) { }
shinyApp(ui, server)
Shiny Dashboard load new tab at top of page
add this anywhere in the body
tags$script('$(".sidebar-menu a[data-toggle=\'tab\']").click(function(){window.scrollTo({top: 0});})')
like this
library(shiny) # shiny application
library(shinydashboard) # shiny dashboard toolkit
library(shinyjs) # allows use of Javascript--used for sidebar closing ability
# ------------------------------------------------------------------------------
# BUILD UI
# ------------------------------------------------------------------------------
# Box height
boxHeight = "30em"
# Header content
header <- dashboardHeader(
title = span("Jim's Dashboard",
style = "color: white; font-size: 28px"),
titleWidth = 260
)
# Sidebar content
sidebar <- dashboardSidebar(
width = 260,
collapsed = TRUE,
sidebarMenu(
id = "mysidebar",
menuItem("Dashboard 1", tabName = "tab1", icon = icon("tachometer-alt")),
menuItem("Dashboard 2", tabName = "tab2", icon = icon("chart-pie"))
)
)
# Body content
body <- dashboardBody(
tags$script('$(".sidebar-menu a[data-toggle=\'tab\']").click(function(){window.scrollTo({top: 0});})'),
# Keep header/sidebar frozen at top, per https://stackoverflow.com/questions/45706670/shiny-dashboadpage-lock-dashboardheader-on-top
tags$script(HTML("$('body').addClass('fixed');")),
# This line allows us to use Javascript; so far, it's only used to make the
# sidebar go away once we've changed pages, per https://stackoverflow.com/questions/47830553/r-shiny-automatically-hide-the-sidebar-when-you-navigate-into-tab-items
useShinyjs(),
tabItems(
# 1ST TAB
tabItem(tabName = "tab1",
fluidRow(
column(width=10, offset=1,
fluidRow(
box(height = boxHeight),
box(height = boxHeight),
box(height = boxHeight),
box(height = boxHeight),
box(height = boxHeight,width = 12),
box(height = boxHeight),
box(height = boxHeight),
box(height = boxHeight,width = 12)
)))),
# 2ND TAB
tabItem(tabName = "tab2",
fluidRow(
column(width=10, offset=1,
fluidRow(
box(height = boxHeight,width = 12),
box(height = boxHeight),
box(height = boxHeight),
box(height = boxHeight),
box(height = boxHeight),
box(height = boxHeight,width = 12),
box(height = boxHeight,width = 12),
box(height = boxHeight,width = 12)
))))
)
)
server <- function(input,output,session){
# Adding these lines makes the sidebar go away once we've loaded a new page,
# per https://stackoverflow.com/questions/47830553/r-shiny-automatically-hide-the-sidebar-when-you-navigate-into-tab-items
observeEvent(input$mysidebar,
{
# for desktop browsers
addClass(selector = "body", class = "sidebar-collapse")
# for mobile browsers
removeClass(selector = "body", class = "sidebar-open")
}
)
}
#Dashboard page
dashboard <- dashboardPage(header, sidebar, body, tags$head(tags$style(HTML('* {font-family: "Lucida Sans"}!important;'))))
shinyApp(dashboard, server)
Add a company logo right after shiny dashboard header toggle button
Something like this with CSS?
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
title = div("", id = "home_logo", a(href = "#Home",
(img(src = "http://www.google.com/s2/favicons?domain=stackoverflow.com", height = "25px",
style = "position: relative; top:-5px; left: -5rem;")) ))
),
dashboardSidebar(
collapsed = TRUE
),
dashboardBody(
tags$style(type="text/css",".sidebar-toggle{ position: absolute;
left: -23rem;
}
.skin-white .main-header .logo, .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover{
background-color: #3c8dbc;}"),
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
Adjust height of the whole header bar in dashboardHeader in shiny dashboard with wraping
I believe you could achieve what you want by replacing the max-height in the first style-tag with min-height, i.e.:
...
tags$style(".main-header {min-height: 20px}"),
...
Adjust height of the whole header bar in dashboardHeader in shiny dashboard
You need to override the min-height of the navbar and padding on the sidebar-toggle. I have updated your example below:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
# Set height of dashboardHeader
tags$li(class = "dropdown",
tags$style(".main-header {max-height: 20px}"),
tags$style(".main-header .logo {height: 20px;}"),
tags$style(".sidebar-toggle {height: 20px; padding-top: 1px !important;}"),
tags$style(".navbar {min-height:20px !important}")
)
),
dashboardSidebar(
# Adjust the sidebar
tags$style(".left-side, .main-sidebar {padding-top: 20px}")
),
dashboardBody()
)
server <- function(input, output){}
shinyApp(ui, server)
How to Disable Shiny bs4Dash Dashboard controlbar (Right Sidebar)
You can remove controlbar argument to disable it.
library(shiny)
library(bs4Dash)
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(
disable = T
),
body = dashboardBody(),
title = ""
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Related Topics
Max-Width:-Webkit-Fit-Content Ie 8 Equivalent
Turn Off Animations in Capybara Tests
Block Elements Only Inside Flex Item
Vertically Center Div When Body Height: 100% Without Absolute Pos
React Native: "Auto" Width for Text Node
How to Scale an Svg Background-Image Without Honoring Aspect Ratio in Firefox
How to Color The Asterix First Character in a P Tag
Stop Div Resizing Parent Div Using CSS
Why Does Firefox Treat Helvetica Differently from Chrome
CSS @Supports (::Pseudo-Element)
How to Use Whitespace: 'Pre-Wrap' on React
Working with CSS Floats in HTML2Pdf
Changing Jupyter's Matching Parenthesis Color
CSS: Why Is Vertical-Align: Baseline Stop Working on Firefox When Using Overflow: Hidden