rshinywidget

Bring the colour widget to front when using colourInput from colourpicker


We use "colourInput" from the package "colourpicker" in a shiny app for picking various colours.

When the colourInput is used by itself (# example 1 below), the widget pops up in the app and everything works fine (image 1 in attached figure)

It still works when we use splitLayout with the homemade "split_color_input" function (# example 2 below). However, the widget is now "hidden" inside a scroll-bar window (image 2 in attached figure). How can we bring it to the front like in example 1?

Figure:

enter image description here

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

Solution

  • a quick way to fix is to overwrite shiny's style .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)
    
    

    enter image description here