使用 colourpicker 中的 colourInput 时，将颜色小部件置于闪亮应用程序的前面

Question

我们在 shinyApp 中使用“colourpicker”包中的“colourInput”来挑选各种颜色。

当单独使用 colourInput 时（# 下面的示例 1），小部件会在应用程序中弹出并且一切正常（附图中的图像 1）

当我们将 splitLayout 与自制的“split_color_input”函数一起使用时它仍然有效（下面的#示例 2）。但是，该小部件现在“隐藏”在滚动条 window 中（附图中的图像 2）。我们如何才能像示例 1 那样将其置于最前面？

Figure

# example 1
ui <- fluidPage(
  colourpicker::colourInput(inputId = "id1",
                            label =  "label1",
                            value = "hotpink",
                            allowTransparent = TRUE,
                            returnName = TRUE,
                            closeOnClick = TRUE)
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)


# example 2
split_color_input = function(n, id, labs, vals, allowTransparent){
  if (n%%2==1){
    colourpicker::colourInput(
      inputId = paste0(id, '.', 1+(n-1)/2),
      label=labs[1+(n-1)/2],
      value=vals[1+(n-1)/2],
      allowTransparent = allowTransparent,
      returnName = TRUE,
      closeOnClick = TRUE)
  }else{
    p("")
  }
}

id = "id2"
labs = c("label2.1", "label2.2")
vals = c("steelblue3", "hotpink")
cellwidths = c("45%", "10%", "45%")


ui <- fluidPage(
  do.call(what=splitLayout, args = c(lapply(1:length(cellwidths), split_color_input, id, labs, vals, allowTransparent=TRUE),
                                     list(cellWidths=as.list(cellwidths)),
                                     list(width=list('500px'))) )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Answer 1

一个快速的修复方法是覆盖 shiny 的样式 .shiny-split-layout>div {overflow: visible}。


# example 2
split_color_input = function(n, id, labs, vals, allowTransparent){
    if (n%%2==1){
        colourpicker::colourInput(
            inputId = paste0(id, '.', 1+(n-1)/2),
            label=labs[1+(n-1)/2],
            value=vals[1+(n-1)/2],
            allowTransparent = allowTransparent,
            returnName = TRUE,
            closeOnClick = TRUE)
    }else{
        p("")
    }
}

id = "id2"
labs = c("label2.1", "label2.2")
vals = c("steelblue3", "hotpink")
cellwidths = c("45%", "10%", "45%")


ui <- fluidPage(
    do.call(what=splitLayout, args = c(lapply(1:length(cellwidths), split_color_input, id, labs, vals, allowTransparent=TRUE),
                                       list(cellWidths=as.list(cellwidths)),
                                       list(width=list('500px')))
    ),
    tags$style(HTML(".shiny-split-layout>div {overflow: visible}"))
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

使用 colourpicker 中的 colourInput 时，将颜色小部件置于闪亮应用程序的前面

bring the colour widget to front in shiny app when using colourInput from colourpicker

r

widget

shinyapps