How to make dropdownButton in shinywidgets always stay on top? - shinyapps

Question

In my shiny app, I have a box with a dropdown menu in the top left corner. However, some of the elements in my box are being cut off by the dropwdown menu (for example, in the pic below the table in my box is being covered by the menu). Is there a way to have the menu to always stay above other elements in my box?
This is my code. I noticed this issue only occurs if I use rhandsontable to render my tables. Unfortunately, I do need to use rhandsontable.
library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(rhandsontable)
factorUI <- function(id) {
ns <- NS(id)
box(
width=6,
title = "Charts",
closable = TRUE,
status = "danger",
solidHeader = TRUE,
collapsible = TRUE,
dropdown(
style = "material-circle",
selectInput(ns("options"),"Select an option:",
choices = list("All" = "all", "Option1" = "option1","Option2" = "option2"),selected = "all"),
conditionalPanel("input.options == 'option1'",ns=ns, sliderInput(ns("shr.month"),"No of months:",min=0,max=1,value=c(0,1),step = 1)),
conditionalPanel("input.options == 'option2'",ns=ns, sliderInput(ns("fh.month"),"No of months:",min=0,max=1,value=c(0,1),step = 1)),
conditionalPanel("input.manual == 'Y'",fileInput(ns("upload"),"Upload new pattern",accept = ".csv")),
materialSwitch(inputId = ns("factorind"),label = "Apply factor",status = "primary",right = TRUE),
conditionalPanel("input.factorind == true",ns=ns,
numericInput(ns("start"),"Apply from:",value = NULL,min=0,step=1),
numericInput(ns("factor"),"Factor:",value=NULL,min=0)),
id = ns("sidebar"),
status = "danger",
size = "sm",
icon = shiny::icon("sliders")),
rHandsontableOutput(ns("table")),
)
}
factor <- function(id) {(
moduleServer(
id,
function(input,output,session) {
output$table <- renderRHandsontable({
rhandsontable(iris)
})
}
)
)}
ui <- fluidPage(
titlePanel("Example"),
sidebarLayout(
sidebarPanel(),
mainPanel(factorUI("test"))
)
)
server <- function(input, output) {
factor("test")
}
shinyApp(ui = ui, server = server)

Answer 1

Increase the z-index of dropdown, you can add the style before the end of box like this:
box(
...,
tags$style('.sw-dropdown-content {z-index: 105;}')
)
The CSS z-index decides the layer order of elements, which one is on top which is below. The table has index of 102, so if you make a number larger than that one for your dropdown (shinyWidgets dropdown default is 5), your drop down will be on top.