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

Question

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

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

一件巧妙的事情shinydashboard是，如果窗口变窄，则正文内容会重新排列，以便这些值框堆叠。但是，如果更改标题高度以容纳徽标，则副作用是：

标题与某些内容重叠。我是 css 新手，但对 AdminLTE.css 和 _all-skins.css 使用的一些挖掘shinydashboard让我更接近一些：

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%）
• 在较窄的窗口中查看时，不要将正文内容与标题重叠。

除了上述，关于标题文本，我已经尝试设置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%）

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

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

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

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

完整的 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;
}