virtualselectinput covering reactable
The problem, as the following picture is shown, is that the options of virtualselectinput is being covered by the reactable below. I want the virtualselectinput and its options be always on the top of the reactable below. How to write the CSS and solve the problem?
library(shiny)
library(shinyWidgets)
library(reactable)
shinyApp(
ui = fluidPage(
shinyjs::useShinyjs(),
navbarPage(title = "Example", id = "NavBarPage", collapsible = TRUE,
tabPanel("tabPanel 1", value = "tabPanel_1",
# uiOutput("ui_for_tabpanel_1"),
fluidPage(
fluidRow(
column(2,
virtualSelectInput(
inputId = "selection_A",
label = "Select A: ",
choices = rownames(mtcars),
search = TRUE,
multiple = TRUE,
showSelectedOptionsFirst = TRUE,
maxValues = 1000
),
),
column(2,
selectInput(inputId = "watchlists", "Select B: ",
choices = c("A", "B", "C", "D", "E", "F", "G", "H", "I"))
),
column(2,
virtualSelectInput(
inputId = "symbols_selected_watchlist",
label = "Select C: ",
choices = rownames(mtcars),
search = TRUE,
multiple = TRUE,
showSelectedOptionsFirst = TRUE,
maxValues = 1000
),
),
),
tags$br(), tags$br(), tags$br(), tags$br(),
reactableOutput("table_A"),
)
),
)
),
server = function(input, output, session) {
output$table_A <- renderReactable({
reactable(mtcars,
fullWidth = TRUE, compact = TRUE, highlight = TRUE,
striped = TRUE, filterable = TRUE,
pagination = TRUE, showPageSizeOptions = TRUE, defaultPageSize = 100,
height = 800,
selection = "single", onClick = "select",
theme = reactableTheme(
rowSelectedStyle = list(backgroundColor = "#808080", boxShadow = "inset 2px 0 0 0 #ffa62d")
)
)
})
}
)
Solution
So you need to adjust the z-index of the dropdown menu. We are going to put this number high.
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
tags$style(HTML(".vscomp-dropbox-container {z-index:99999 !important;}"))
library(shiny)
library(shinyWidgets)
library(reactable)
shinyApp(
ui = fluidPage(
shinyjs::useShinyjs(),
navbarPage(title = "Example", id = "NavBarPage", collapsible = TRUE,
tabPanel("tabPanel 1", value = "tabPanel_1",
tags$style(HTML(".vscomp-dropbox-container {z-index:99999 !important;}")),
fluidPage(
fluidRow(
column(2,
virtualSelectInput(
inputId = "selection_A",
label = "Select A: ",
choices = rownames(mtcars),
search = TRUE,
multiple = TRUE,
showSelectedOptionsFirst = TRUE,
maxValues = 1000
)
),
column(2,
selectInput(inputId = "watchlists", "Select B: ",
choices = c("A", "B", "C", "D", "E", "F", "G", "H", "I"))),
column(2,
virtualSelectInput(
inputId = "symbols_selected_watchlist",
label = "Select C: ",
choices = rownames(mtcars),
search = TRUE,
multiple = TRUE,
showSelectedOptionsFirst = TRUE,
maxValues = 1000))
),
tags$br(), tags$br(), tags$br(), tags$br(),
reactableOutput("table_A"),
)
)
)
),
server = function(input, output, session) {
output$table_A <- renderReactable({
reactable(mtcars,
fullWidth = TRUE, compact = TRUE, highlight = TRUE,
striped = TRUE, filterable = TRUE,
pagination = TRUE, showPageSizeOptions = TRUE, defaultPageSize = 100,
height = 800,
selection = "single", onClick = "select",
theme = reactableTheme(
rowSelectedStyle = list(backgroundColor = "#808080", boxShadow = "inset 2px 0 0 0 #ffa62d")
)
)
})
}
)
- Is it possible to pull css values with HTA javascript?
- Unable to make the animation function in Tailwind CSS
- CSS selector for first element with class
- Using margin:auto to vertically-align <div>
- how to change angular stepper progress color when next step active
- How to get the grid coordinates of an element using JavaScript?
- How to stop dark mode at inline css?
- Unable to make text bold in SVG
- Extend "grid-lines" beyond a CSS grid
- Show hide divs on click in HTML and CSS without jQuery
- input type color default color input as HEX
- Enable content on row hover in Blazor wasm
- Can't vertical scroll page on mobile devices with full width PrimeNg carousel
- Using custom HTML Tags
- Why is ccsnano messing up the css of bootstrap styles in gulp builder?
- Giving wrapped flexbox items vertical spacing
- force element to display outside of overflow:hidden
- How do I make the text that is inside a half capsule shape?
- Capsule shape using border-radius without a set width or height?
- Using css how so I create a pill shape which is circular on one side and angled on the other?
- How to make a pill shape button with HTML and CSS?
- Modal fixed position content shift
- Change text with a CSS3 animation?
- Changing the Style of a specific element by Checkbox:Checked
- slideDown jumps abruptly at the end
- Why doesn't CSS nesting appended nesting selector work within pseudoselectors?
- How to show empty date picker in Material UI- REACT?
- Formatting a nested table in HTML
- How can I center text (horizontally and vertically) inside a div block?
- How to use CSS files with <s:head> tag in Struts 2?