3

I used the answer to Adjust height of the whole header bar in dashboardHeader in shiny dashboard to make my dashboardHeader smaller. When I make the browser window smaller then the header gets wrapped but the "Test"-output is not adapted.

I added a tags$style(".content-wrapper {padding-top: 12px}") into dashboardBody which give more space, but I either would like to have no wrap of the header or the position of the output adapted.

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(
    tags$style(".content-wrapper {padding-top: 12px}"),   
    verbatimTextOutput('test')
  )
)

server <- function(input, output){
    output$test <- renderText('Test')
}

shinyApp(ui, server)
sigbert
  • 77
  • 5

1 Answers1

0

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}"),
...
RolandASc
  • 3,863
  • 1
  • 11
  • 30
  • 1
    It worked, thanks. I also adjusted the sidebar replacing `tags$style(".left-side, .main-sidebar {padding-top: 20px}")` by `tags$style(".left-side, .main-sidebar {top: auto; padding-top: 0px}")`, which worked, too. Since I'am not familiar with CSS, is that ok? – sigbert Mar 13 '18 at 08:31
  • I'd say yes, definitely looks better – RolandASc Mar 14 '18 at 15:06