侧边栏面板中没有出现闪亮的小部件答案

【问题标题】：Shiny widget not appearing in sidebarPanel侧边栏面板中没有出现闪亮的小部件
【发布时间】：2021-01-29 01:23:40
【问题描述】：

我在 Shiny 应用程序中使用 shinydashboard::sidebarSearchForm，并希望在其下方放置其他小部件。但是，每当我这样做时，它们都会被推出sidebarPanel 并进入侧边栏下方的空白处。在下面的代码中，materialSwitch 在sidebarPanel 中，但呈现在侧边栏的外部。但是，如果您将materialSwitch 放在sidebarPanel 中的sidebarSearchForm 上方，则所有小部件都正确包含在侧边栏中。如何确保所有这些小部件都留在侧边栏中？我希望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){
}

【问题讨论】：

标签： r shiny shinydashboard shinyapps

【解决方案1】：

这种行为的原因

问题源于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(...) {})

【讨论】：