在闪亮的仪表板中对齐标题元素 [英] Align header elements in shiny dashboard

问题描述

我正在与 shinydashboard 一起使一个闪亮的应用程序变得有些爵士乐，但是我无法在页面上放置一些元素（例如徽标）。我发现了

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

关于 shinydashboard 的一件整洁的事情是，如果窗口变窄，主体内容重新排列，以便那些值框堆叠。但是，如果更改标题高度以适应徽标，则会产生以下副作用：

标题与某些内容重叠。
我是CSS的新手，但是对 shinydashboard 所使用的AdminLTE.css和_all-skins.css进行了一些深入的研究：

 库（发光）
库（发光板）
 
服务器<-function（输入，输出，会话）{} 
 
 ui< -dashboardPage（
 title = ShinyApp，
标头= dashboardHeader（
标签$ li（
 class = dropdown，
 tags $ style（
 .main-header {max-height：100px; 
 font-size：24px; 
 font-weight：粗体； 
行高：24px;}），
标签$ style（
 .main-header .logo {height：100px; 
 font-size：24px; 
 font-weight：bold; 
 line-height：24px; align：} 
）
），
 title = HTML（
< div style ='background-color：＃3333cc;垂直对齐：中间’> 
< img src =‘http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg’align =’left’height =‘100px’> 
更长，更长，更静止的闪亮应用程序标题
< / div>），
 titleWidth = 92％ 
），
侧边栏= dashboardSidebar（ 
 width = 300px，
 sidebarMenu（
 tags $ style（
 .main-sidebar {float：top; margin-top：40px; padding-left：15px; padding-right：15px} 
），
 h2（ Sidebar heading），
 slideInput（inputId = slider1，
 label = Somebar，
最小值= 5，
最大值= 500，
值= 100，
步长= 5），
 numericInput（inputId = num1，
标签= HTML （ em单位的值/ em），
分钟= 1000，
步长= 250，
值= 500）
）
） ，
 body = dashboardBody（
 tags $ head（
 tags $ style（
 HTML（
 .skin-blue .main-header .navbar {backgrou nd-color：＃3333cc} 
 .skin-blue .main-header .navbar .sidebar-toggle：hover {background-color：red} 
 .skin-blue .main-header .logo {background -color：＃3333cc; border-bottom：0纯透明；} 
 .skin-blue .main-header .logo：hover {background-color：＃3333cc;} 
 .content-wrapper {float ：最佳; margin-top：40px} 
）
）
），
 fluidRow（
 valueBox（width = 6，
 value = 20％， 
 icon = icon（ thumbs-up），
 subtitle = some value，
 color = orange），
 valueBox（width = 6，
值= 30,000个单位，
图标=图标（卡车），
字幕=其他值，
颜色=橙色）
）
）
）
 ShinyApp（ui = ui，服务器=服务器）
  

收益

从另一个答案中，我得到了类似填充以将侧边栏向下移动，并猜测是否要对.content-wrapper进行类似的修改

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

和

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

折叠模式还可以，但是现在有两个垂直滚动条并加宽再次在窗口上，主体顶部和页眉之间现在有了黑色分隔符。我用于页边空白的40px纯粹是反复试验。

总结一下：

• 我想向左对齐标题徽标（也许也可以向右切换侧边栏，
  ，但可以在原处使用）


• 垂直对齐标题文字


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


• 在
  a缩小的窗口中查看时，正文内容与标题不重叠。 / li>
  

除了上述内容外，关于标题文本，我还尝试设置 style = vertical-align：middle ，如此帖子（示例代码中仍然有一个示例），但文字始终顽固地位于顶部。大概有一个css元素可以控制它。

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

解决方案

请注意，我不是 CSS 专家，所以并不是每个解决方案都可以。

删除不必要的垂直字段滚动条

  .wrapper {overflow-y：hidden;} 
  

我想将标头徽标左对齐（也许也可以将侧边栏右移，但是可以与

将 padding 覆盖为 0px ：

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

浮动侧边栏切换右侧：

  .sidebar-toggle {
 float：right！important; 
} 
  

垂直对齐标题文本

垂直对齐无效，但是可以使用行高设置标题。

  .main-header .logo {
 line-height：85px！important; 
 padding：0 0px; 
} 
  

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

增加最大高度 >主标题。或者，您可以减少文本的数量，以使其更适合中小屏幕。

  .main-header {
 max-height：200像素！重要； 
} 
  

在

从 margin-top > .content-wrapper {float：top; margin-top：40px}。。再加上以前的更改就足够了。

完整的CSS，包括您的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 {
最大高度：200px！important; 
} 
 .sidebar-toggle {
 float：right！important; 
} 
 
 .main-header .logo {
 line-height：85px！important; 
 padding：0px 0px; 
} 
  

I'm working with shinydashboard to jazz up a shiny app a bit and I'm having trouble positioning some elements (eg logo) on the page. I found this answer which was immensely useful in increasing the height of the header, but I can't quite manage the alignment issue.

There are still spaces on the left and right (red ovals) between the logo and the floating hamburger and the edges. The only way I've been able to move the hamburger has been increasing the relative size (titleWidth = "92%") of the header to accommodate the longer title, but if the window is resized, the menu collapse toggle ends up in weird places. And the text in the middle I'd like to centre vertically.

One neat thing about shinydashboard is that if the window is made narrower, the body content rearranges so those value boxes stack. The side effect, however, if the header height is changed to accommodate the logo is:

the header overlaps some of the content. I'm new to css but some digging through the AdminLTE.css and the _all-skins.css that are used by shinydashboard got me something a bit closer:

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)

yielding

from another answer, I got something like padding to shift the sidebar down and took a guess at making a similar modification to the .content-wrapper

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

and

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

collapsed mode is okay, but there are now two vertical scroll bars and widening the window again, there's now a black separator between the top of the body and the header. The 40px I used for the margin-top was purely trial and error.

To summarise:

• I'd like to align header logo left (maybe also sidebar toggle right, but can live with where it is)
• Vertically-align the header text
• Accommodate a longer title (eg titleWidth = 95%)
• Not overlap body content with header when viewed in a narrower window.

Aside from the above, regarding the header text, I have tried setting style = "vertical-align:middle" in various places around the text and logo image definitions as suggested in this post (one example is still in the sample code), but the text remains stubbornly at the top. Presumably there is a css element I haven't found that controls it.

Any help would be greatly appreciated. Note sample code modified to use random stock internet photo rather than android logo to facilitate reproducibility of example.

解决方案

please note that I am not a CSS expert so not every solution might be ideal.

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)

Override padding to 0px:

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

Float sidebar-toggle to the right:

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

Vertically-align the header text

vertical-align has no effect, but you can use line-height to set the title where you want.

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

Accommodate a longer title (eg titleWidth = 95%)

Increase the max-height of the main-header. Alternatively you could decrease the amount of text so that it fits small-middle screens better.

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

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

Remove margin-top from .content-wrapper {float:top; margin-top:40px}". This alongside with the previous change should be sufficient.

Complete CSS including yours:

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

这篇关于在闪亮的仪表板中对齐标题元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！