CODEWITHSUNDEEP
rshinyshinydashboard
sigbert
sigbert

Reputation: 77

Adjust height of the whole header bar in dashboardHeader in shiny dashboard with wraping

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)

Upvotes: 3

Views: 1492

Answers (1)

RolandASc
RolandASc

Reputation: 3923

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}"),
...

Upvotes: 0

Related Questions