Shinydashboard remove extra space when header is disabled

Question

The whole code/files can be found in this answer

UI.R file
library(shiny)
library(shinydashboard)
shinyUI( 
  dashboardPage(
    dashboardHeader(disable = TRUE), #title=textOutput("title")),
    dashboardSidebar(uiOutput("side")),
    dashboardBody(
          uiOutput("page")
    )))

However, I want to disable header in my dashboard, with help from here I managed to disable but then there is some white space added in my dashboard. (see image, the orange highlighed box).

How can I get rid of this? This is not only on login page, the problem persist even after logged in.

Answer 1

I think that it is a missing feature on shiny dashboard to automatically add to the body the height of the header. I fixed it with a trick using JavaScript. The solution is based on add 50px to the CSS min-height attribute of body just after creating the page. Also I added an event listener to add the 50px if the size of the window changes.

library(shiny)
library(shinydashboard)

server <- function(input, output) {
}
ui <- dashboardPage(
  dashboardHeader(disable = TRUE),
  dashboardSidebar(),
  dashboardBody(
    tags$script('window.onload = function() {
      function fixBodyHeight() {
        var el = $(document.getElementsByClassName("content-wrapper")[0]);
        var h = el.height();
        el.css("min-height", h + 50 + "px");
      };
      window.addEventListener("resize", fixBodyHeight);
      fixBodyHeight();
    };')
  )
)

shinyApp(ui, server)

Answer 2

You can add class and then remove it from server side

(idea of hide head get here )

library(shiny)
library(shinyjs)
library(shinydashboard)
server=shinyServer(
  function(input, output,session) {
    observeEvent(input$activate,{
      js$hidehead('')  # show head
      removeClass("body_d","DISABLED") # remove class
    })
  })


ui=
shinyUI( 
  dashboardPage(
    dashboardHeader(disable = T), #title=textOutput("title")),
    dashboardSidebar(uiOutput("side")),
    dashboardBody(class="DISABLED",id="body_d",
                  useShinyjs(),
                  extendShinyjs(text = "shinyjs.hidehead = function(parm){
                                    $('header').css('display', parm);
                                }"),
      tags$style(".DISABLED { min-height: 100vh !important};
                 "),
      actionButton("activate","activate header")
    )))

shinyApp(ui,server)

If you dont want to show header after something -- all you need is add class and add css min-height: 100vh !important as example