将徽标移至闪亮的仪表板中仪表板标题的左侧

问题描述 投票:0回答:1

我在标题的右侧有一个发光的仪表板,上面带有公司徽标,但我想将其移到左侧。这是我的尝试(将徽标放入您应用目录的www子目录中)。因为dashboardHeader()期望使用类型为li且类为dropdown的tag元素,所以我们可以传递此类元素代替dropdownMenus。我还需要标题中的文本才能正常显示。

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader(title = "My Dashboard",

                            tags$li(a(href = 'http://www.company.com',
                                      img(src = 'company_logo.png',
                                          title = "Company Home", height = "30px"),
                                      style = "padding-top:10px; padding-bottom:10px;"),
                                    class = "dropdown"))

server <- function(input, output) {}

shinyApp(
  ui = dashboardPage(
    dbHeader,
    dashboardSidebar(),
    dashboardBody(
      tags$head(tags$style(HTML(
        '.myClass { 
        font-size: 20px;
        line-height: 50px;
        text-align: left;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 0 625px;
        overflow: hidden;
        color: white;
      }
    '))),
      tags$script(HTML('
      $(document).ready(function() {
        $("header").find("nav").append(\'<span class="myClass"> ABCD Hypothesis Generation Model </span>\');
      })
     '))
    )
  ),
  server = server
)    
r shiny shinydashboard
1个回答
0
投票

您要移动的项目是一个类别为.navbar-custom-menu的div。将其添加到tags$head(tags$style(HTML(...)))中的自定义CSS中,以使其向左浮动:

.navbar-custom-menu {
       float: left!important;
}

[C0对于防止它被其他地方的CSS覆盖是必要的。

© www.soinside.com 2019 - 2024. All rights reserved.