如何移除Shiny应用侧边栏展开/收起时出现的黑白占位条

你遇到的这个问题主要由三处配置问题导致：logo和header高度不匹配溢出、侧边栏定位参数错误、shinydashboard默认的容器背景和阴影样式。按以下步骤修改即可消除多余的黑白条：

步骤1：修正header和logo的高度匹配 #

找到你dashboardHeader里的样式配置段，替换为如下代码，避免logo溢出header占用侧边栏上方空间：

tags$li(class = "dropdown",
        tags$style(".main-header {max-height: 80px; height: 80px !important; }"),
        tags$style(".main-header .logo {height: 80px; line-height: 80px !important;}"),
        tags$style(".sidebar-toggle {height: 80px; padding-top: 40px !important;}"),
        tags$style(".navbar {min-height:80px !important}")
)            

步骤2：修改侧边栏和内容区的定位样式 #

找到dashboardSidebar开头的侧边栏调整样式，替换为如下代码，消除多余边距、阴影和背景色块：

tags$style("
  /* 侧边栏定位适配自定义header高度 */
  .left-side, .main-sidebar {
    top: 80px !important;
    padding-top: 0 !important;
    box-shadow: none !important;
    border-right: none !important;
  }
  /* 统一外层容器背景色为内容区白色，消除多余色块 */
  .wrapper {
    background-color: #ffffff !important;
  }
  /* 内容区边距适配侧边栏宽度 */
  .content-wrapper, .right-side {
    margin-left: 225px !important;
    border-left: none !important;
    padding-top: 10px !important;
  }
  /* 侧边栏收起时的内容区边距适配 */
  .sidebar-collapse .content-wrapper, .sidebar-collapse .right-side {
    margin-left: 50px !important;
  }
")

如果不需要保留收起状态的侧边栏，可以在上述样式中额外添加一行：

.sidebar-collapse .main-sidebar {display: none !important;}

同时把.sidebar-collapse .content-wrapper的margin-left改为0即可完全释放侧边栏空间。

内容的提问来源于stack exchange，提问作者Andres Mora