Wrong display - How to fit well a selectinput in a shinydashboard header and style it

Question

I want to put a selectInput inside the dashboardHeaderPlus but this makes that the header extends itself out of bounds, messing even with the sidebar as it's shown in the image:

What it's intended to happen, is making the selectInput look like the Facebook search bar, which means centered without affecting the header and styled with a magnifying glass icon if it's possible. Just like this:

Image: Actual output / Intended output

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)


MenuProfesor <- function(){
    selectInput(inputId = "Search",
                label = NULL,
                selected = FALSE, 
                multiple = FALSE,
                choices = c('1','2','3','4'))
}

header <- dashboardHeaderPlus(
  title = 'Planificación UAI',
  enable_rightsidebar = FALSE,
  left_menu = tagList( MenuProfesor())
  )

ui <- dashboardPage(
  header,
  dashboardSidebar(),
  dashboardBody()
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

Answer 1

Does this work for you?:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)

header <- dashboardHeaderPlus(
  title = 'Planificación UAI',
  tags$li(class = "dropdown",
          tags$li(class = "dropdown", div(searchInput(
            inputId = "search", 
            label = NULL, 
            placeholder = "Search...", 
            btnSearch = icon("search"), 
            btnReset = icon("remove"),
            width = "100%"
          ), style= "width: 25%; margin-left: auto; margin-right: auto; margin-top:-43px; margin-bottom:-10px;"))),
  enable_rightsidebar = FALSE,
  fixed = TRUE
)

ui <- dashboardPage(
  header,
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output, session) {}

shinyApp(ui, server)

---

Result:

Also you might want to check this related question.