移除Shiny UI中sidebarPanel()与mainPanel()的边距

要消除sidebarPanel和mainPanel之间及边缘的空白，你需要覆盖Shiny默认布局的几个关键样式——只给面板设置margin:0没用，因为父容器（fluidPage的.container-fluid、sidebarLayout所在的.row）还有默认的边距/内边距，同时面板自身也有默认内边距。

修改方案 #

在fluidPage开头添加全局CSS，覆盖这些默认样式：

ui <- fluidPage(
  # 全局样式覆盖，消除默认边距和内边距
  tags$style(HTML("
    .container-fluid {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    .sidebar-panel, .main-panel {
      padding: 0 !important;
      margin: 0 !important;
    }
  ")),
  sidebarLayout(
    sidebarPanel(width=4,
                 style = "height: 90vh; overflow-y: auto;",
                 p("in my actual app there are a bunch of buttons and selection inputs here that are used to generate the spatial dataframe object shown in the map")
    ),
    mainPanel(width=8,
              tags$style(HTML(".tabbable > .nav > li > a {height: 20px; padding-top:2px; padding-bottom:2px}")),
              tabsetPanel(type='tabs',
                          tabPanel("Map",
                                   tags$style(type = "text/css", "#map {height: calc(45vh) !important;}"),
                                   leafletOutput("map"),
                          ),
                          tabPanel("Table",
                                   tags$style('#table :is(th, td) {padding: 4px;}'),
                                   div(dataTableOutput(outputId = "table"), style = "height: calc(47vh); font-size: 75%; width: 100%;") 
                          )
              )
    )
  )
)

样式说明 #

• .container-fluid：消除fluidPage容器的左右内边距，让布局贴紧视口左右边缘
• .row：消除sidebarLayout所在行的左右外边距
• .sidebar-panel和.main-panel：清除面板自身的内边距和外边距，让它们完全填满各自的列空间

如果需要侧边栏完全填满视口高度，可将sidebarPanel的height:90vh改为height:100vh。

内容的提问来源于stack exchange，提问作者Wander Demuynck