问题描述
我在一个有光泽的应用程序中使用shinydashboard::sidebarSearchForm，并希望在其下面放置其他小部件。但是，每当我这样做时，它们都会从sidebarPanel推出并进入侧边栏下方的空白处。在下面的代码中，materialSwitch在sidebarPanel中，但在侧边栏的 outside 中呈现。如果将materialSwitch放在sidebarSearchForm中sidebarPanel上方，则所有小部件都正确包含在侧栏中。如何确保所有这些小部件都留在侧栏中？我希望materialSwitch位于侧边栏的底部。谢谢！
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- tagList(
navbarPage(
theme = "simplex","App",tabPanel("Do something",sidebarPanel(
sliderInput("slider","Select Num:",min = 1,max = 10,sep = "",value = c(1,10)),pickerInput(
inputId = "picker",label = "Select:",selected = "a",choices = letters,options = list(
`actions-Box` = TRUE,size = 10,`selected-text-format` = "count > 3"
),multiple = TRUE
),h5(HTML("<b>Search</b>")),sidebarSearchForm(textId = "searchText",buttonId = "searchButton",label = "Include These"
),h5(HTML("<b>Additional Options:</b>")),materialSwitch(inputId = "add",label = "Add?:?",value = FALSE,status = "primary")
),mainPanel(
tabsetPanel(
tabPanel("Tab","text"
)
)
)
)
)
)
server <- function(input,output){
}
解决方法
这种行为的原因
该问题是由于sidebarPanel和sidebarSearchForm都创建了<form>标签和<form>tags must not include other <form> tags而引起的。例如，在chrome中，这种无效的HTML是固定的，我的猜测是这种固定会将元素移出了侧边栏。
顺便说一句：sidebarSearchForm用于dashboardSidebar（不会创建<form>标签。
解决方法
我不是HTML专家，所以我不知道sidebarSearchForm是否需要坐在自己的<form>中（过去也不使用此元素）。
假设没有必要将其放在自己的<form>中，则可以像这样调整sidebarSearchForm：
mySidebarSearchForm <- function (textId,buttonId,label = "Search...",icon = shiny::icon("search")) {
div(class = "sidebar-form",div(class = "input-group",tags$input(id = textId,type = "text",class = "form-control",placeholder = label,style = "margin: 5px;"),span(class = "input-group-btn",tags$button(id = buttonId,type = "button",class = "btn btn-flat action-button",icon))))
}
（这基本上是原始sidebarSearchForm的副本，由<form>取代了<div>）
然后，UI呈现应有的状态：
ui <- tagList(
navbarPage(
theme = "simplex","App",tabPanel("Do something",sidebarPanel(
mySidebarSearchForm(textId = "searchText",buttonId = "searchButton",label = "Include These"
),actionButton("go","go")
),mainPanel(
tabsetPanel(
tabPanel("Tab","text"
)
)
)
)
)
)
shinyApp(ui,server = function(...) {})
