Shinydashboard禁用标题时如何去除额外空间

Question

整个代码/文件可以在这个答案中找到。

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

然而，我想在我的仪表板中禁用标题，在 这里 的帮助下成功禁用了，但是我的仪表板上出现了一些空白区域(如下图所示，框起来的部分为橙色)。

我该如何消除这个问题? 这不仅出现在登录页面上，即使登陆后问题仍然存在。

- Vasim

Answer 1

我认为，在闪亮的仪表板上自动添加标题高度是一个缺失的功能。我使用JavaScript技巧来解决这个问题。解决方案是在创建页面后，在CSS min-height 属性中添加50像素到body中。此外，我还添加了一个事件监听器，以便在窗口大小发生变化时添加50像素。

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)

- Geovany

---

谢谢，但是一旦我登录，它又会恢复到旧状态。而且侧边栏面板没有移动到标题的位置。非常感谢！！ - Vasim

你能否在你的问题中添加一个最小可重现的例子来说明问题？ - Geovany

在这个答案中，是我使用的确切代码。 - Vasim

对我来说，这个解决方案在调整窗口大小时非常有效，但在初始加载时却不起作用。我尝试添加了一行代码 window.addEventListener("load", fixBodyHeight)，但也没有起到效果。 - Jochem

Answer 2

您可以在服务器端添加类，然后将其删除。

（隐藏头部的想法可以在此处获取：这里）

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)

如果您不想在某些情况下显示标题，您只需要添加类并添加css min-height: 100vh !important，如下所示：

- Batanichek