The select drop down menu appear behind other elements in shiny

Question

Can any one give me a solution to the following issue where the drop down goes under the plotly hover when going to select the fist item in the drop down.

I used the following code. But didn't work.

in UI,

fluidRow(
                                   tags$hr(style="z-index: 10000;"),
                                   column(width = 3,h2("Device Type")),
                                   column(width = 3,htmlOutput("disselect")),
                                   column(width = 3,htmlOutput("cityeselect")),
                                   column(width = 3,h2("Property Type"))
                                 ),

in server

output$disselect <- renderUI({
    selectInput("district", "District", c("All",unique(bookings$District)), selected = "All")
  })

Any hacks?

score 2 · Accepted Answer · answered Feb 21 '18 at 19:53

Set the z-index of the drop-down so that it's greater than that of the plotly modebar, for instance 1002 would work:

column(width = 3, offset = 9, 
               selectInput("y", "y", colnames(mtcars)),style="z-index:1002;")

A working example:

library(shiny)
library(plotly)

ui <- fluidPage(
  fluidRow(
    column(width = 3, offset = 9, 
           selectInput("y", "y", colnames(mtcars)),style="z-index:1002;")
  ),
  fluidRow(plotlyOutput("plot"))
)

server <- function(input, output, session) {
  output$plot <- renderPlotly({
    g <- ggplot(mtcars, aes_string("disp", input$y)) +
      geom_point()
    g <- ggplotly(g) %>%
      config(displayModeBar = TRUE)
    g
  })
}

shinyApp(ui, server)

score 0 · Answer 2 · answered Feb 21 '18 at 19:31

If you don't need the plotly modebar, you can just remove it.

Here's an example:

library(shiny)
library(plotly)

ui <- fluidPage(
        fluidRow(
                column(width = 3, offset = 9, 
                       selectInput("y", "y", colnames(mtcars)))
        ),
        fluidRow(plotlyOutput("plot"))
)

server <- function(input, output, session) {
        output$plot <- renderPlotly({
                g <- ggplot(mtcars, aes_string("disp", input$y)) +
                        geom_point()
                ### code to hide the modebar ###
                g <- ggplotly(g) %>%
                        config(displayModeBar = FALSE)
                g
        })
}

shinyApp(ui, server)

The select drop down menu appear behind other elements in shiny

2 Answers2