0
0 Comments

I used this solution in order to adjust height of a 

dashboardHeader()
in 
shinydashboard
. My problem comes when I try to see different viewports. In a normal monitor display, the new header height doesn’t cover neither the sidebar nor the body of the page. But using a mobile viewport, both are covered.

This is the code I’m using:

library(shiny) library(shinydashboard)

ui <- dashboardPage(   dashboardHeader(
    # Set height of dashboardHeader
    tagsli(class = "dropdown",             tagsstyle(".main-header {max-height: 200px}"),
            tagsstyle(".main-header .logo {height: 200px;}"),             tagsstyle(".sidebar-toggle {height: 200px; padding-top: 1px !important;}"),
            tagsstyle(".navbar {min-height:200px !important}")     )    ),   dashboardSidebar(     # Adjust the sidebar     tagsstyle(".left-side, .main-sidebar {padding-top: 200px}"),
    selectInput(inputId="1", label = "Label1", choices = "variable", "Variable:"),
    selectInput(inputId="2", label = "Label2", choices = "variable", "Variable:")   ),   dashboardBody(
    fluidRow(
      tabBox(width =12, 
             tabPanel("Tab1", "First tab content"),
             tabPanel("Tab2", "Tab content 2"))
    )   ) )

server <- function(input, output){}

shinyApp(ui, server)

This is a monitor display:

enter image description here

And this would be in a mobile viewport:

enter image description here

As you can see, both top of sidebar and body are hidden behind the new header height

Thank you

Anonymous Asked question May 13, 2021