CODEWITHSUNDEEP
rshiny
Oscar Jnn
Oscar Jnn

Reputation: 154

R Shiny display values of a SelectInput from bottom to top

Is it possible to display the value of a SelectInput above the input and not under it as it is as default?

here is a reproductible example :

shinyApp(
  ui = fluidPage(
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    selectInput("state", "Choose a state:",
                list(`East Coast` = list("NY", "NJ", "CT"),
                     `West Coast` = list("WA", "OR", "CA"),
                     `Midwest` = list("MN", "WI", "IA"))
    ),
    textOutput("result")
  ),
  server = function(input, output) {
    output$result <- renderText({
      paste("You chose", input$state)
    })
  }
)

Upvotes: 1

Views: 634

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84519

Here is a CSS solution:

CSS <- "
.selectize-dropdown {
  bottom: 100% !important; 
  top: auto !important;
}
"

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$style(HTML(CSS))
    ),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    br(),
    selectInput("state", "Choose a state:",
                list(`East Coast` = list("NY", "NJ", "CT"),
                     `West Coast` = list("WA", "OR", "CA"),
                     `Midwest` = list("MN", "WI", "IA"))
    ),
    textOutput("result")
  ),
  server = function(input, output) {
    output$result <- renderText({
      paste("You chose", input$state)
    })
  }
)

Upvotes: 5

Related Questions