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

Question

我shinydashboard::sidebarSearchForm在一个闪亮的应用程序中使用，并想在它下面放置其他小部件。但是，每当我这样做时，它们都会被推出sidebarPanel并进入侧边栏下方的空白处。在下面的代码中，materialSwitch它位于sidebarPanel但呈现在侧边栏之外。如果您将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){
}

标签： rshinyshinydashboardshinyapps

Answer 1

这种行为的原因

问题源于这样一个事实，即sidebarPanel创建sidebarSearchForm标签<form>和<form>标签都不能包含其他<form>标签。例如，在 chrome 中，这种无效HTML是固定的，我的猜测是这种修复会将元素移出侧边栏。

顺便说一句：sidebarSearchForm旨在用于 a dashboardSidebar（不创建<form>标签。

---

解决方法

我不是 HTML 专家，所以我不知道是否sidebarSearchForm需要自己坐<form>（我过去也没有使用过这个元素）。

假设没有必要将它放在 own<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>by <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(...) {})