在闪亮的仪表板中对齐 header 个元素

Question

我正在与 shinydashboard 合作，使一个闪亮的应用程序更加生动，但我在页面上定位某些元素（例如徽标）时遇到了问题。我发现 this 答案对增加 header 的高度非常有用，但我无法完全解决对齐问题。

logo和漂浮的汉堡和边缘之间左右（红色椭圆）还有空格。我能够移动汉堡包的唯一方法是增加 header 的相对大小 (titleWidth = "92%") 以容纳更长的标题，但是如果调整 window 的大小，菜单折叠切换最终出现在奇怪的地方。中间的文字我想垂直居中。

关于 shinydashboard 的一个巧妙之处在于，如果 window 变窄，body 内容会重新排列，以便这些值框堆叠。但是，如果更改 header 高度以适应徽标，副作用是：

header 与部分内容重叠。我是 css 的新手，但通过 AdminLTE.css 和 shinydashboard 使用的 _all-skins.css 的一些挖掘让我更接近一些：

library(shiny)
library(shinydashboard)

server <- function(input, output, session) {}

ui <- dashboardPage(
  title = "ShinyApp",
  header = dashboardHeader(
    tags$li(
      class = "dropdown",
      tags$style(
        ".main-header {max-height: 100px; 
                      font-size:24px; 
                      font-weight:bold; 
                      line-height:24px;}"),
      tags$style(
        ".main-header .logo {height: 100px;
                             font-size:24px; 
                             font-weight:bold; 
                             line-height:24px;align:}"
      )
    ),
    title = HTML(
      "<div style = 'background-color:#3333cc; vertical-align:middle'>
       <img src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg' align = 'left' height = '100px'>
        Long, longer, longer-still Shiny App title
       </div>"),
    titleWidth = "92%"
  ),
  sidebar = dashboardSidebar(
    width = "300px",
    sidebarMenu(
      tags$style(
        ".main-sidebar {float:top; margin-top:40px; padding-left:15px; padding-right:15px}"
      ),
      h2("Sidebar heading"),
      sliderInput(inputId = "slider1",
                  label = "Some slider",
                  min = 5, 
                  max = 500,
                  value = 100, 
                  step = 5),
      numericInput(inputId = "num1",
                   label = HTML("Value in <em>units</em>"),
                   min = 1000, 
                   step = 250, 
                   value = 500)
    )
  ),
  body = dashboardBody(
    tags$head(
      tags$style(
        HTML(
          ".skin-blue .main-header .navbar {background-color: #3333cc}
           .skin-blue .main-header .navbar .sidebar-toggle:hover {background-color: red}
           .skin-blue .main-header .logo {background-color: #3333cc;border-bottom: 0 solid transparent;}
           .skin-blue .main-header .logo:hover {background-color: #3333cc;}
           .content-wrapper {float:top; margin-top:40px}"
        )
      )
    ),
    fluidRow(
      valueBox(width = 6,
               value = "20%",
               icon = icon("thumbs-up"),
               subtitle = "some value",
               color = "orange"),
      valueBox(width = 6,
               value = "30,000 units",
               icon = icon("truck"),
               subtitle = "some other value",
               color = "orange")
    )
  )
)
shinyApp(ui = ui, server = server)

屈服

从另一个答案中，我得到了类似填充的东西来向下移动侧边栏，并猜测对 .content-wrapper

进行类似的修改

.main-sidebar {float:top; margin-top:40px; padding-left:15px; padding-right:15px}

和

.content-wrapper {float:top; margin-top:40px}

折叠模式没问题，但现在有两个垂直滚动条并再次加宽 window，body 和 header 顶部之间现在有一个黑色分隔符.我用于 margin-top 的 40px 纯粹是反复试验。

总结一下：

我想将 header 徽标左对齐（也许侧边栏也向右切换，但可以接受它所在的位置）
Vertically-align header 文字
容纳更长的标题（例如 titleWidth = 95%）
在 body 中查看内容时不会与 header 内容重叠更窄的 window.

除上述之外，关于 header 文本，我尝试按照 this post 中的建议在文本和徽标图像定义周围的各个位置设置 style = "vertical-align:middle"（一个示例是仍在示例代码中），但文本仍然顽固地位于顶部。大概有一个 css 元素我还没有找到控制它。

如有任何帮助，我们将不胜感激。请注意示例代码已修改为使用随机库存互联网照片而不是 android 徽标以促进示例的重现性。

Answer 1

请注意，我不是 CSS 专家，因此并非每个解决方案都是理想的。

Remove unnecessary vertical scroll bars

.wrapper {overflow-y: hidden;}

I'd like to align header logo left (maybe also sidebar toggle right, but can live with where it is)

将 padding 覆盖为 0px:

.main-header .logo {
  padding: 0px 0px;
}

向右浮动sidebar-toggle：

.sidebar-toggle {
  float: right !important;
}

Vertically-align the header text

vertical-align没有效果，但是可以用line-height设置标题。

.main-header .logo {
  line-height: 85px !important;
  padding: 0 0px;
}

Accommodate a longer title (eg titleWidth = 95%)

增加max-height的main-header。或者，您可以减少文本量，使其更适合 small-middle 屏幕。

.main-header {
  max-height: 200px !important;
}

Not overlap body content with header when viewed in a narrower window.

从 .content-wrapper {float:top; margin-top:40px}" 中删除 margin-top。这与之前的更改一起应该就足够了。

完成 CSS 包括你的：

.skin-blue .main-header .navbar {background-color: #3333cc}
.skin-blue .main-header .navbar .sidebar-toggle:hover {background-color: red}
.skin-blue .main-header .logo {background-color: #3333cc;border-bottom: 0 solid transparent;}
.skin-blue .main-header .logo:hover {background-color: #3333cc;}
.content-wrapper {float:top;}
.wrapper {overflow-y: hidden;}
.main-header {
  max-height: 200px !important;
}
.sidebar-toggle {
  float: right !important;
}

.main-header .logo {
  line-height: 85px !important;
  padding: 0px 0px;
}

在闪亮的仪表板中对齐 header 个元素

Align header elements in shiny dashboard

css

r

shiny

shinydashboard

adminlte