html - 在仪表板标题中间对齐可变长度的文本

Question

我使用shiny-dashboard包，标题需要有标题、文本和 Logo 。

标题应位于左侧，文本应位于标题的中间/中心， Logo 应位于右侧。仪表板侧边栏还有两个过滤器(选择输入)。中间的文本显示用户选择，因此文本的长度根据不同的选择而不同。我没有 css 背景，也不知道如何将可变长度文本放置在标题的中心。另一个问题是，当我最小化屏幕时，文本和 Logo 会堆叠在一起，并且不会保持在一行中，如下所示:

为了简化代码，我只使用了一个简单的文本，并且没有在此处显示我的服务器代码，但“长度可变的长文本取决于用户选择”基本上是一个 uiOutput 并且将是根据选择而改变。

shinyApp(
  ui = dashboardPage(
dashboardHeader( 

  title = HTML(paste0("Dashboard example")) , titleWidth = 455,
  tags$li(class="dropdown",
          tags$table(style="80%;align:center;border-collapse:seperate;border-spacing:20px;",
                     tags$tr(
                       tags$td(h3("long text with variable length dependant on user selections")),
                       tags$td(
                         a(href='link',
                           img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg',
                               title= "image title", height = "50px"),
                           style = "display:block;position:absolute,width:50px; padding-top:10px; padding-bottom:10px;padding-right:10px;"),
                         class="dropdown"))))),
dashboardSidebar(),
dashboardBody(tags$head(
  tags$style(HTML("
                  .my_class {
                  font-weight: bold;
                  color:white;
                  }"))
))),
  server = function(input, output) { }
  )

最小化屏幕会破坏标题，如下所示

使用下面提供的代码，我明白了。

Answer 1

尝试这样的事情:

library(shiny)
library(shinydashboard)

shinyApp(
  ui = dashboardPage(
    dashboardHeader( 
      title = "Dashboard example",
      titleWidth = 455,
      tags$li(
        class = "dropdown",
        fluidRow(
          column(
            width = 4, 
            offset = 4, 
            align = "center",
            span("long text with variable length dependant on user selections")
          ),
          column(
            width = 4,
            align = "right",
            img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg')
          )
        )
      )
    ),
    dashboardSidebar(width = 455),
    dashboardBody(
      tags$style(
        ".main-header .navbar-custom-menu {
          width: calc(100% - 50px);
        }

        .main-header .navbar-nav,
        .main-header .dropdown {
          width: 100%;
        }

        .main-header img {
          height: 50px
        }"
      )
    )
  ),
  server = function(input, output) {}
)