0

I'm creating a responsive Shiny app and I would like the pickerInputs to adopt the OS's native picker format when a user access it from a mobile in order to prevent the choices being cut off when the screen is smaller, for which I am using mobile = TRUE as an option for pickerInput().

This works great on mobile, but not so much via desktop Chrome or Edge.

Upon investigation it appears to be an issue with multiple = TRUE also being set - interestingly this does not cause an issue on mobile and both work as intended there. Is it possible for me to have mobile = TRUE apply only when mobile is true, i.e. when the user is accessing the app via a smart device?

Reproducible example:


library(shiny)
library(shinyWidgets)


ui <- fluidPage(
    div(
      pickerInput(
        inputId = "Title_picker_input",
        label = "",
        choices = c("A", "B", "C"),
        multiple = TRUE,
        options = pickerOptions(
          mobile = TRUE
        )
      )
    )
)


server <- function(input, output) {

    
}


shinyApp(ui = ui, server = server)
anorlondo
  • 383
  • 1
  • 9

1 Answers1

1

I did a little google search and found this package: shinybrowser (CRAN, GitHub repo).

Also made a little change on your example. But I did not have any test platform run on mobile devices, so accept this answer if you tested and it works.

library(shiny)
library(shinyWidgets)
library(shinybrowser)

ui <- fluidPage(
  shinybrowser::detect(),  # activate shinybrowser first
  div(
    uiOutput("picker_input") # dynamic UI component
  )
)

server <- function(input, output) {
  output$picker_input <- renderUI({
    user_os <- shinybrowser::get_os()
    is_mobile <- user_os %in% c("iOS", "Android", "BlackBerry", "Windows Phone")
    pickerInput(
      inputId = "Title_picker_input",
      label = "",
      choices = c("A", "B", "C"),
      multiple = TRUE,
      options = pickerOptions(
        mobile = is_mobile
      )
    )
  })
}

shinyApp(ui = ui, server = server)
Su Na
  • 334
  • 1
  • 7