colourpicker-panel is partially hidden in a rank_list

colourpicker-panel is partially hidden in a rank_list(), but the same is not true in a tagList(). Is there a way to implement the CSS property overflow: visible or change z-index?

library(shiny)
library(sortable)
library(colourpicker)

mycolors <- c("#0A954F", "#e0677b", "#244457","#01B0F0")

labels <- list(
  htmltools::tags$div(
    div(id = "my_col1", colourInput("col1", label=NULL, mycolors[1], palette = "square", width = "90px", allowTransparent = TRUE), style = "margin-bottom: 5px;" ), style="z-index:1;"
  ),
  tags$div(
    colourInput("col2", label=NULL, mycolors[2], palette = "square", width = "90px", allowTransparent = TRUE), style = "z-index:2;"
  ),
  tags$div(
    colourInput("col3", label=NULL, mycolors[3], palette = "square", width = "90px", allowTransparent = TRUE), style = "z-index:3;"
  )
)

ui = fluidPage(
  tags$head(tags$style(HTML('.colourpicker-focus>.colourpicker-input-container>.colourpicker-panel>div { overflow:visible; }'))),
  sidebarLayout(
    sidebarPanel(
      uiOutput("color_list"),
      uiOutput("color_list2")
    ),
    mainPanel(
      plotOutput("plot")
    )
  )
    
  )
server = function(input, output) {
  output$color_list <- renderUI({
    rank_list_basic <- rank_list(
      text = "Drag the items in any desired order",
      labels = labels,
      input_id = "rank_list_basic"
    )
  })
  
  output$color_list2 <- renderUI({
    tagList(
      colourInput("col1b", "", mycolors[1], palette = "square", width = "90px", allowTransparent = TRUE),
      colourInput("col2b", "", mycolors[2], palette = "square", width = "90px", allowTransparent = TRUE),
      colourInput("col3b", "", mycolors[3], palette = "square", width = "90px", allowTransparent = TRUE)
    )
  })
  
  output$plot <- renderPlot({
    set.seed(1)
    plot(rnorm(50), bg = input$col1, col = input$col1, pch = 21)
  })
  
  
}

shinyApp(ui, server)

Solution

rank_list() wraps elements in a container with overflow: hidden;, which clips dropdowns and popups. Even though you're setting overflow: visible on the panel, the parent container still clips it.

We could us force overflow: visible on .rank-list-container and its parents with custom CSS in tags$head().

library(shiny)
library(colourpicker)
library(sortable)

mycolors <- c("#0A954F", "#e0677b", "#244457", "#01B0F0")

labels <- list(
  tags$div(
    div(
      id = "my_col1",
      colourInput("col1", label = NULL, mycolors[1], palette = "square", width = "90px", allowTransparent = TRUE),
      style = "margin-bottom: 5px;"
    )
  ),
  tags$div(
    colourInput("col2", label = NULL, mycolors[2], palette = "square", width = "90px", allowTransparent = TRUE)
  ),
  tags$div(
    colourInput("col3", label = NULL, mycolors[3], palette = "square", width = "90px", allowTransparent = TRUE)
  )
)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .rank-list-container, .rank-list, .rank-list-item {
        overflow: visible !important;
        z-index: auto !important;
      }
      
      .colourpicker-panel {
        z-index: 9999 !important;
      }
    "))
  ),
  sidebarLayout(
    sidebarPanel(
      uiOutput("color_list"),
      hr(),
      strong("Control group (not clipped):"),
      uiOutput("color_list2")
    ),
    mainPanel(
      plotOutput("plot")
    )
  )
)

server <- function(input, output) {
  output$color_list <- renderUI({
    rank_list(
      text = "Drag and test the color pickers",
      labels = labels,
      input_id = "rank_list_basic"
    )
  })
  
  output$color_list2 <- renderUI({
    tagList(
      colourInput("col1b", "", mycolors[1], palette = "square", width = "90px", allowTransparent = TRUE),
      colourInput("col2b", "", mycolors[2], palette = "square", width = "90px", allowTransparent = TRUE),
      colourInput("col3b", "", mycolors[3], palette = "square", width = "90px", allowTransparent = TRUE)
    )
  })
  
  output$plot <- renderPlot({
    plot(rnorm(50), bg = input$col1, col = input$col1, pch = 21)
  })
}

shinyApp(ui, server)