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

Posted 2023-03-24

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

【英文标题】：Get tags$div object (titlebar) to extend to screen edge (R Shiny app)

【发布时间】：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 这也很有效。谢谢！

【参考方案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;")

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