将图像、标题和按钮设置在闪亮仪表板标题的同一行中 [英] Set image, title and buttons in the same line of the header of a shiny dashboard

问题描述

如何将图像、标题和按钮放在闪亮仪表板的标题内的同一行中？标题看起来仍然隐藏在按钮上方，但由于我使用tags$li()，因此它应该位于图像和按钮之间。

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
mytitle <- paste0("Life, Death & Statins")
dbHeader <- dashboardHeaderPlus(
  titleWidth = "0px",
  tags$li(a(href = "http://https://www.uow.edu.au/", #   '',
            div(style = "margin-left:-15px;margin-bottom:-70px;margin-top:-15px;padding: 0px 1190px 0px 0px ; width: 290px;",
                img(src = 'download.png', height = "55px",width="232px")),
            div(style="display: inline; padding: 0px 90px 0px 1600px ;font-size: 22px ;color: black;font-family:Times-New Roman;font-weight: bold; width: 300px;",HTML(mytitle, "<br>")),
            div(style="display: inline;padding: 0px 0px 0px 1350px;vertical-align:top; width: 150px;", actionButton("well", "Welcome")),
            div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("info", "Information")),
            div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("conse", "Consent")),
            div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("pswd", "Password")),
            div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("rp", "Run Project")),
            div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("res", "Results"))
            
  ),
  class = "dropdown")

  
)

shinyApp(
  ui = dashboardPagePlus(
    header = dbHeader,
    sidebar = dashboardSidebar(width = "0px"
                                         ),
    body = dashboardBody(
      
      useShinyjs(),
      tags$script(HTML("$('body').addClass('fixed');")),
      
      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}"))
      
    )
    
  ),
  server<-shinyServer(function(input, output,session) { 
    hide(selector = "body > div > header > nav > a")
    
  }
  )
)

推荐答案

可能您正在寻找此信息。

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
mytitle <- paste0("Life, Death & Statins")
dbHeader <- dashboardHeaderPlus(
  titleWidth = "0px",
  tags$li(a(href = "http://https://www.uow.edu.au/", #   '',
            div(style = "margin-left:-15px;margin-bottom:-83px;margin-top:-15px;padding: 0px 1190px 0px 0px ; width: 290px;",
                img(src = 'YBS.png', height = "125px",width="232px")),
            div(style="display: inline;margin-top:-35px; padding: 0px 90px 0px 800px ;font-size: 58px ;color: black;font-family:Times-New Roman;font-weight: bold; width: 500px;",HTML(mytitle)),
            div(style="display: inline;margin-top:25px; padding: 0px 0px 0px 800px;vertical-align:top; width: 150px;", actionButton("well", "Welcome")),
            div(style="display: inline;margin-top:15px; padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("info", "Information")),
            div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("conse", "Consent")),
            div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("pswd", "Password")),
            div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("rp", "Run Project")),
            div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("res", "Results"))
            
  ),
  class = "dropdown")
  
  
)

shinyApp(
  ui = dashboardPagePlus(
    header = dbHeader,
    sidebar = dashboardSidebar(width = "0px"
    ),
    body = dashboardBody(
      
      useShinyjs(),
      tags$script(HTML("$('body').addClass('fixed');")),
      
      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}"))
      
    )
    
  ),
  server<-shinyServer(function(input, output,session) { 
    hide(selector = "body > div > header > nav > a")
    
  }
  )
)

这篇关于将图像、标题和按钮设置在闪亮仪表板标题的同一行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！