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

Question

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

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

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

标题与某些内容重叠。 我是css的新手，但有些人正在通过AdminLTE.css挖掘和shinydashboard使用的_all- 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 ：

.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 .content-wrapper {float:top; margin-top:40px}" .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;
}