在闪亮的仪表板中对齐标题元素

Question

我正在与shinydashboard 合作，为一个闪亮的应用程序增添一点活力，但我无法在页面上定位某些元素（例如徽标）。我发现this 答案对于增加标题的高度非常有用，但我无法完全解决对齐问题。

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

shinydashboard 的一个巧妙之处在于，如果窗口变窄，正文内容会重新排列，因此这些值框会堆叠。但是，如果更改标题高度以适应徽标，则副作用是：

标题与某些内容重叠。 我是 css 新手，但通过 shinydashboard 使用的 AdminLTE.css 和 _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}

折叠模式还可以，但是现在有两个垂直滚动条并再次加宽了窗口，现在在正文顶部和标题之间有一个黑色分隔符。我用于 margin-top 的 40px 纯粹是反复试验。

总结一下：

• 我想将标题徽标左对齐（也许侧边栏切换右， 但可以忍受它所在的地方）
• 垂直对齐标题文本
• 容纳更长的标题（例如titleWidth = 95%）
• 在查看时不与标题重叠正文内容 一个更窄的窗口。

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

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

Answer 1

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

删除不必要的垂直滚动条

.wrapper {overflow-y: hidden;}

我想将标题徽标向左对齐（也许侧边栏也可以向右切换，但可以适应它的位置）

将padding 覆盖为0px：

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

将sidebar-toggle 向右浮动：

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

垂直对齐标题文本

vertical-align 没有效果，但是你可以使用line-height 来设置你想要的标题。

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

容纳更长的标题（例如titleWidth = 95%）

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

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

在较窄的窗口中查看时，正文内容不会与标题重叠。

从.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;
}