如何调整Shiny应用程序中的边距异常问题

调整后可直接运行的代码 #

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
  title="Test", collapsible = TRUE,
  # 清除tabPanel默认的全局内边距
  tabPanel("", style = "padding: 0;",
           
           div(
             style = 
               "min-height: 80px; background-color: #02BE7F; width: 100%; padding: 1px 0;",
           h2(HTML("Project <b>Description</b>"), 
              style="text-align:center;color: white"),
           ),
           # 下方文字区域调整上下边距
           div(
             style = "width: 70%; margin: 30px auto;",
             h2(HTML("Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"), 
                                      style="text-align:justify"))
)

)

server <- function(input, output,session) {
  
}

shinyApp(ui = ui, server = server)

主要修改点 #

• 移除了原绿色头部div的position: absolute属性，该属性会让元素脱离正常文档流，导致下方内容和导航栏默认边距叠加出现多余空白
• 给tabPanel添加了style = "padding: 0;"，清除Shiny框架默认给tab页设置的全局内边距，消除左右两侧的多余空白
• 把固定高度height:80px改为min-height:80px，同时加了少量上下内边距，避免标题内容超出容器范围
• 调整了下方介绍文字区域的上边距，和绿色头部留出合适的视觉间隔，你可以按需调整margin: 30px auto里的30px数值来改变上下间距，调整70%修改文字区域的宽度占比

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