Уменьшите размер selectinput, добавленного в заголовок Shinydashboard

Question

У меня есть блестящая приборная панель ниже, и я добавил selectInput() в заголовок. Как вы можете видеть, заголовок стал больше, чтобы соответствовать этому, и теперь результат не так хорош. Есть ли способ отрегулировать высоту selectInput(), чтобы исправить это?

#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) { }
)

Answer 1

Мы можем использовать пользовательские css, чтобы исправить размер заголовка панели. Затем мы снова используем css, чтобы переместить метку selectInput() влево от поля ввода выбора, а не над ним.

#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) { }
)