微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

调整 Shinydashboard 标题中的图像、动作按钮和标题的位置

如何解决调整 Shinydashboard 标题中的图像、动作按钮和标题的位置

我在下面有一个闪亮的应用程序,我想在标题中放入一个图像、一个标题和四个操作按钮,就像附加的屏幕截图一样。 4 个按钮应位于标题下方且不覆盖图像。我该如何适应?它取决于屏幕分辨率吗?字体和字体大小不应改变。

enter image description here

应该是这样的:

enter image description here

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",actionButton("rp","Run Project",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",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")


  }
  )
)

解决方法

太多的左侧填充将其推到了右侧。试试这个

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",actionButton("rp","Run Project",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",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")
    
    
  }
  )
)

output

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。