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％）

增加max-height的{{1}}。或者，您可以减少文本量，以便更好地适应中小屏幕。

main-header

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

从.main-header { max-height: 200px !important; }移除margin-top。这与之前的改变一起应该足够了。

完整的CSS包括你的：

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

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

1 个答案: