调整 shinydashboard header 中图像、操作按钮和标题的位置

Question

我有下面这个闪亮的应用程序，我想在其中放入 header 一张图片、一个标题和四个操作按钮，如所附屏幕截图所示。 4 个按钮应位于标题下方且不覆盖图像。我该如何适应它？它取决于屏幕分辨率吗？字体和字体大小不应更改。

应该是这样的：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)


mytitle <- paste0("Life, Death & Statins")
dbHeader <- dashboardHeaderPlus(
  titleWidth = "0px",
  tags$li(a(
    div(style = "margin-left:-15px;margin-bottom:-83px;margin-top:-15px;padding: 0px 1190px 0px 0px ; width: 290px;",
        img(src = 'logo-primary-linen.png', height = "125px",width="232px")),
    div(style="display: inline;margin-top:-35px; padding: 0px 90px 0px 1250px ;font-size: 44px ;color:#001641;font-family:Chronicle Display Light; width: 500px;",HTML(mytitle)),
    
    div(style="display: inline;margin-top:15px; padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("info", "Information", 
                                                                                                                          style=" background-color: #faf0e6; border-color: #faf0e6")),
    div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("conse", "Consent", 
                                                                                                         style=" background-color: #faf0e6; border-color: #faf0e6")),
    div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("rp", "Run Project", 
                                                                                                         style=" background-color: #faf0e6; border-color: #faf0e6")),
    div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("res", "Results", 
                                                                                                         style=" background-color: #faf0e6; border-color: #faf0e6"))
    
  ),
  class = "dropdown")
  
  
)

shinyApp(
  ui = dashboardPagePlus(
    header = dbHeader,
    sidebar = dashboardSidebar(width = "0px",
                               sidebarMenu(id = "sidebar", # id important for updateTabItems
                                           menuItem("Information", tabName = "info", icon = icon("table")),
                                           menuItem("Consent", tabName = "conse", icon = icon("line-chart")),
                                           menuItem("Run Project", tabName = "rp", icon = icon("table")),
                                           menuItem("Results", tabName = "res", icon = icon("line-chart"))
                               )          ),
    body = dashboardBody(
      
      useShinyjs(),
      tags$script(HTML("$('body').addClass('fixed');")),
      
      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),
      

      
      tabItems(
        
        tabItem("info"
                
        ),
        tabItem("conse"
                ),
        tabItem("rp"),
        tabItem("res"
                )
      )
      
    )
    
  ),
  server<-shinyServer(function(input, output,session) { 
    hide(selector = "body > div > header > nav > a")


  }
  )
)

Answer 1

过多的左侧填充将其推向右侧。试试这个

mytitle <- paste0("Life, Death & Statins")
dbHeader <- dashboardHeaderPlus(
  titleWidth = "0px",
  tags$li(a(
    div(style = "margin-left:-15px;margin-bottom:-78px;margin-top:-15px;padding: 0px 1190px 0px 0px ; width: 290px;",
        img(src = 'UOW.png', height = "155px",width="232px")),
    div(style="display: inline;margin-top:-35px; padding: 0px 50px 0px 700px ;font-size: 44px ;color:#001641;font-family:Chronicle Display Light; width: 500px;",HTML(mytitle)),
    
    div(style="display: inline; margin-top:15px; padding: 0px 0px 0px 700px;vertical-align:top; width: 150px;", actionButton("info", "Information", 
                                                                                                                          style=" background-color: #faf0e6; border-color: #faf0e6")),
    div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("conse", "Consent", 
                                                                                                         style=" background-color: #faf0e6; border-color: #faf0e6")),
    div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("rp", "Run Project", 
                                                                                                         style=" background-color: #faf0e6; border-color: #faf0e6")),
    div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("res", "Results", 
                                                                                                         style=" background-color: #faf0e6; border-color: #faf0e6"))
    
  ),
  class = "dropdown")
  
  
)

shinyApp(
  ui = dashboardPagePlus(
    header = dbHeader,
    sidebar = dashboardSidebar(width = "0px",
                               sidebarMenu(id = "sidebar", # id important for updateTabItems
                                           menuItem("Information", tabName = "info", icon = icon("table")),
                                           menuItem("Consent", tabName = "conse", icon = icon("line-chart")),
                                           menuItem("Run Project", tabName = "rp", icon = icon("table")),
                                           menuItem("Results", tabName = "res", icon = icon("line-chart"))
                               )          ),
    body = dashboardBody(
      
      useShinyjs(),
      tags$script(HTML("$('body').addClass('fixed');")),
      
      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),
      
      
      
      tabItems(
        
        tabItem("info"
                
        ),
        tabItem("conse"
        ),
        tabItem("rp"),
        tabItem("res"
        )
      )
      
    )
    
  ),
  server<-shinyServer(function(input, output,session) { 
    hide(selector = "body > div > header > nav > a")
    
    
  }
  )
)

调整 shinydashboard header 中图像、操作按钮和标题的位置

Adapt the position of image, actionbuttons and tιtle in header of shinydashboard

r

shiny

shinydashboard