J'utilise shinydashboard::sidebarSearchForm dans une application Shiny et j'aimerais placer d'autres widgets en dessous. Cependant, chaque fois que je le fais, ils sont poussés hors du sidebarPanel et dans l'espace blanc sous la barre latérale. Dans le code le code ci-dessous, le materialSwitch est dans sidebarPanel mais rend à l'extérieur de la barre latérale. Si vous placez le materialSwitch au-dessus du sidebarSearchForm dans le sidebarPanel, alors tous les widgets sont correctement contenus dans la barre latérale. Comment m'assurer que tous ces widgets restent dans la barre latérale ? Je veux que le materialSwitch soit en bas de la barre latérale. Merci!


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){
}

1
BHudson 14 oct. 2020 à 18:28

1 réponse

Meilleure réponse

Raison de ce comportement

Le problème vient du fait que sidebarPanel ainsi que sidebarSearchForm créent une balise <form> et <form>les balises ne doivent pas inclure d'autres balises <form>. Dans Chrome, par exemple, un tel HTML invalide est corrigé et je suppose que cette correction déplace l'élément hors de la barre latérale.

BTW : sidebarSearchForm est destiné à être utilisé dans un dashboardSidebar (qui ne crée pas de balise <form>.


Solution de contournement

Je ne suis pas un expert HTML, donc je ne sais pas si le sidebarSearchForm doit s'asseoir dans son propre <form> (je n'ai pas non plus utilisé cet élément dans le passé).

En supposant qu'il n'est pas nécessaire de l'avoir dans son propre <form>, vous pouvez modifier sidebarSearchForm comme ceci :

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))))
}

(Il s'agit essentiellement d'une copie de l'original sidebarSearchForm remplaçant le <form> par <div>)

Ensuite, l'interface utilisateur s'affiche comme il se doit :

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(...) {})

enter image description here

1
thothal 16 oct. 2020 à 11:09