虚拟选择输入覆盖可反应

Question

问题如下图所示，是virtualselectinput的选项被下面的reactable覆盖了。我希望 virtualselectinput 及其选项始终位于下面可反应的顶部。如何编写CSS并解决问题？

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")

                    )
          )

      })

    }
)

Answer 1

所以你需要调整下拉菜单的

z-index

。我们将把这个数字调高。

z-index CSS 属性设置定位元素及其后代或弹性项目的 z 顺序。 z-index 较大的重叠元素覆盖那些较小的元素。

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")
                  
                )
      )
      
    })
  }
)