错误的显示 - 如何在闪亮的仪表板标题中很好地适应选择输入并设置它的样式

Posted 2023-03-24

【中文标题】错误的显示 - 如何在闪亮的仪表板标题中很好地适应选择输入并设置它的样式

【英文标题】：Wrong display - How to fit well a selectinput in a shinydashboard header and style it

【发布时间】：2019-11-02 16:47:58

【问题描述】：

我想在dashboardHeaderPlus 中放置一个selectInput，但这会使标题超出范围，甚至与图像中显示的侧边栏一样混乱：

它的目的是让selectInput 看起来像 facebook 搜索栏，这意味着居中而不影响标题，如果可能的话，用放大镜图标设置样式。就像这样：

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)

【参考方案1】：

这对你有用吗？：

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)

---

结果：

您可能还想查看此related question。