Search code examples
rshinydashboard

Reduce the size of a selectinput added in the header of a shinydashboard

I have the shiny dashboard below and I have added a selectInput() in the header. As you can see the header became bigger to fit this and now the outcome is not so pretty. Is there a way to adjust the height of the selectInput() in order to fix this?

#app.r
library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(tags$li(selectInput("variable", "Variable:",
                 c("Cylinders" = "cyl",
                  "Transmission" = "am",
                 "Gears" = "gear")),class="dropdown")

    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
    ),
    rightsidebar = rightSidebar(),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)
Solution

  • We can use custom css to fix the size of the dashboard header. Then we use css again to move the label of selectInput() to the left of the select input box, rather than above it.

    #app.r
library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(tags$li(div(style="height: 50px; width: 150px;margin-top:
                                             0px;margin-right:30px;margin-bottom:0px;",
                                             selectInput("variable", "Variable:",
                                                         c("Cylinders" = "cyl",
                                                           "Transmission" = "am",
                                                           "Gears" = "gear"))),
                                         class = "dropdown",
                                         tags$style(type="text/css", ".selectize-input 
                                                    {height: 20px; width: 120px;}label.control-label,
                                                    .selectize-control.single{ display: table-cell; text-align: 
                                                    left; vertical-align: middle; } .form-group
                                                    { display: table-row;}")
                                         )


    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
    ),
    rightsidebar = rightSidebar(),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)

    output