Question

我创建了以下Shiny模板，以演示我要面对的问题，以完全展示selectInput()

library(shiny)


ui = shinyUI(       
        fluidPage(
            div(
                div(style = "margin-top: 110px;",                   
                wellPanel(
                        column(12, style = "background-color:WhiteSmoke; height:123px; margin: 0; padding: 0;", 
                            splitLayout(cellWidths =  c('60%', '30%'),
                                div(id = 'bb', style = "background-color: #e8e8e8; border-radius: 5px; padding: 20px 0px 10px 20px;", 
                                    splitLayout(cellWidths =  c('55%', '40%'),  
                                        div(id = 'aa', style = "z-index: 20000;", 
                                            selectInput(inputId = "Pick", label = "Chose", choices = c('A', 'B', 'C'), 
                                                                                selected = NULL, multiple = FALSE, selectize = TRUE, size = NULL, width = 300))

                                    ))))


                    )
            )                   
    )))

server = function(input, output, session) {
    }

shinyApp(ui = ui, server = server)

正如您所看到的那样，当我点击selectInput()的下拉列表时，整个元素都没有显示出来，它被div所掩盖。

任何想法如何解决这个问题将非常感激。我尝试调整z-index，但无法成功。

谢谢，

Answer 1

要考虑“完整”这个问题，您可以删除我在评论中提到的splitLayouts：

library(shiny)


ui = shinyUI(       
        fluidPage(
            div(
                div(style = "margin-top: 110px;",                   
                wellPanel(
                        column(12, style = "background-color:WhiteSmoke; height:123px; margin: 0; padding: 0;", 
                                div(id = 'bb', style = "background-color: #e8e8e8; border-radius: 5px; padding: 20px 0px 10px 20px;",   
                                        div(id = 'aa', style = "z-index: 20000;", 
                                            selectInput(inputId = "Pick", label = "Chose", choices = c('A', 'B', 'C'), 
                                                                                selected = NULL, multiple = FALSE, selectize = TRUE, size = NULL, width = 300))

                                    ))


                    )
            )                   
    )))

server = function(input, output, session) {
    }

shinyApp(ui = ui, server = server)

selectInput（）的下拉列表被周围的div屏蔽

1 个答案: