2

I used shiny-dashboard package and the header needs to have a title, a text and a logo.

Title should be on the left side, text should be in the middle/center of the header and logo should be on the right side. Dashboard sidebar has also two filters (select inputs).The text in the middle is showing the user selections and therefore the length of the text is different based on various selections. I don't have a css background and not sure how to position the variable length text at the center of the header. Another problem is that when I minimize my screen, the text and logo stack on top of each other and don't stay in one line as shown below:

enter image description here

To simplify the code, I just used a simple text and I didn't show my server code here but "long text with variable length dependant on user selections" is basically a uiOutput and will be changed based on selections. 

shinyApp(
  ui = dashboardPage(
dashboardHeader( 

  title = HTML(paste0("Dashboard example")) , titleWidth = 455,
  tags$li(class="dropdown",
          tags$table(style="80%;align:center;border-collapse:seperate;border-spacing:20px;",
                     tags$tr(
                       tags$td(h3("long text with variable length dependant on user selections")),
                       tags$td(
                         a(href='link',
                           img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg',
                               title= "image title", height = "50px"),
                           style = "display:block;position:absolute,width:50px; padding-top:10px; padding-bottom:10px;padding-right:10px;"),
                         class="dropdown"))))),
dashboardSidebar(),
dashboardBody(tags$head(
  tags$style(HTML("
                  .my_class {
                  font-weight: bold;
                  color:white;
                  }"))
))),
  server = function(input, output) { }
  )

expected result

Minimizing the screen breaks the header as below

Using the code provided below, I get this. enter image description here

John
  • 43
  • 1
  • 6

1 Answers1

2

Try something like this:

library(shiny)
library(shinydashboard)

shinyApp(
  ui = dashboardPage(
    dashboardHeader( 
      title = "Dashboard example",
      titleWidth = 455,
      tags$li(
        class = "dropdown",
        fluidRow(
          column(
            width = 4, 
            offset = 4, 
            align = "center",
            span("long text with variable length dependant on user selections")
          ),
          column(
            width = 4,
            align = "right",
            img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg')
          )
        )
      )
    ),
    dashboardSidebar(width = 455),
    dashboardBody(
      tags$style(
        ".main-header .navbar-custom-menu {
          width: calc(100% - 50px);
        }

        .main-header .navbar-nav,
        .main-header .dropdown {
          width: 100%;
        }

        .main-header img {
          height: 50px
        }"
      )
    )
  ),
  server = function(input, output) {}
)
Yanir Mor
  • 581
  • 3
  • 15
  • Thanks, four questions: 1- How do I ensure that a text is also vertically centered in the header as well ? 2- The header breaks when I minimize the screen as the text pushes down the height of the header. Is there anyway to fix that? – John Jan 30 '19 at 18:04
  • 3- If the text becomes too long as it happens since the length is different, it doesn't fit in the specified space and it also breaks the header even in full screen. 4- To get the css classes (.main-header .navbar-nav, .main-header .dropdown) , do you look at the DOM after writing the initial code? I want to know the best way to modify shiny look. I add the picture in my post to show what I mean. – John Jan 30 '19 at 18:05