获取 tags$div 对象（标题栏）以扩展到屏幕边缘（R Shiny 应用程序）答案

【问题标题】：Get tags$div object (titlebar) to extend to screen edge (R Shiny app)获取 tags$div 对象（标题栏）以扩展到屏幕边缘（R Shiny 应用程序）
【发布时间】：2021-12-09 10:32:18
【问题描述】：

我正在尝试使用带有 h3 标题的 div 对象为我的 Shiny 应用程序制作标题栏。我将填充和边距都设置为 0px，但边缘周围仍然有一个讨厌的白色间隙。过去使用dashboardHeader的时候，这个差距是不存在的，所以它似乎不是Shiny的固有组件。

代码：

library(shiny)
ui <- fluidPage(
              tags$div(
                       id = 'titlebar',
                       
                      ## App title
                      HTML('<h3 id="apptitle"><span>SD Card Processing App</span></h3>')
                      ), # div
              tags$style('
                         #titlebar {
                                    position: relative;
                                    margin: 0px;
                                    padding: 0px;
                                    background-color: #3c8dbc;
                                    height: 80px;
                                   }
          
                         #apptitle {
                                    position: relative;
                                    top: 30px;
                                    left: 130px;
                                    color: white;
                                   }

                         #apptitle span {
                                         background-color: #367fa9;
                                         padding-top: 28px;
                                         padding-bottom: 24px;
                                         padding-right: 20px;
                                         padding-left: 20px;
                                        }
                        ')
             ) # fluidPage
server <- function(input, output, session) {
}

shinyApp(ui, server)

【问题讨论】：

应该这样做。 #titlebar {margin: -20px;}
@YBS 这也很有效。谢谢！

标签： html css r shiny

【解决方案1】：

要消除左右边缘的空白，请将“标题栏”div 包裹在 fluidRow 中。

fluidRow(tags$div(id = 'titlebar',
                  ## App title
                  HTML('<h3 id="apptitle"><span>SD Card Processing App</span></h3>')
))

如果您想要一个在左侧、顶部或右侧没有空格的标题栏，您可以从以下简单内容开始：

fluidRow(tags$div(id = 'titlebar1', tags$h3('title')), style="background-color: cyan;")

然后根据自己的喜好调整样式细节。

【讨论】：