Search code examples
ruser-interfaceshinyshiny-server

R Shiny: Automatic wellpanel wrapping UI


On my UI i'm trying to have my filter appear wrapped in the wellpanel. When the app is run, it appears like the drop down menu and the associated checkboxes are lying 'on top' of it, rather than being wrapped inside of it.

Here is a picture of what i mean: https://i.sstatic.net/2ika0.jpg

Reproducable example:

UI

    require(shiny)
    require(devtools)
    library(grDevices)
    library(xlsx)


shinyUI(fluidPage(
  fluidRow(
    column(3,
    wellPanel(
      )),
    column(9,
      fluidRow(
      wellPanel(
          column(3,
              uiOutput("filter1"))
        ))

    ))
))

server

shinyServer(function(input, output) {

 output$filter1 <- renderUI({
 selectInput("filter1", label="Filter 1", choices = c("No Filter","a","b"))
 })
})

Solution

  • You can add some styling on the wellPanel to handle the problem:

    library(shiny)
    runApp(list(ui= fluidPage(
      fluidRow(
        column(3, wellPanel()),
        column(9,
               fluidRow( wellPanel(style = "overflow: hidden;", 
                 column(3, uiOutput("filter1"))
               ))
        )
      )
    )
    , server = function(input, output) {
    
      output$filter1 <- renderUI({
        selectInput("filter1", label="Filter 1", choices = c("No Filter","a","b")
                    , selectize = FALSE)
      })
    })
    )
    

    enter image description here