Multiple colourpickers within splitLayout, colour box gets hidden

Question

When two colour pickers used side by side using splitLayout, colour map gets hidden. It might be easily fixed using tags$style...HTML(), any ideas?

• Link to colourpicker package: CRAN and GitHub

Here is an example:

library(shiny)
library(colourpicker)

shinyApp(
  ui = fluidPage(
    sidebarPanel(
      splitLayout(
        colourInput("PlotThemeColour1",
                    "Plot theme shade 1",
                    "#C2C2C2"),
        colourInput("PlotThemeColour2",
                    "Plot theme shade 2",
                    "#E5E5E5"))),
    mainPanel(textOutput("myCols"))
  ),

  server = function(input, output, session) {
    output$myCols <- renderText({
      paste(input$PlotThemeColour1, "and", input$PlotThemeColour2)

    })
  })

---

Output

Answer 1

I'm not sure what's the right way of fixing it. But a quick workaround is to override the css that's causing it. Currently the value of that css .shiny-split-layout>div's overflow is set to auto and this is present in shiny.css so using an inline css to override it with overflow:visible seems to solve the issue.

library(shiny)
library(colourpicker)

shinyApp(
  ui = fluidPage(
     tags$style(HTML('.shiny-split-layout>div {
                         overflow:visible;
                                   }')), 
    sidebarPanel(
      splitLayout(
        colourInput("PlotThemeColour1",
                    "Plot theme shade 1",
                    "#C2C2C2"),
        colourInput("PlotThemeColour2",
                    "Plot theme shade 2",
                    "#E5E5E5"))),
    mainPanel(textOutput("myCols"))
  ),

  server = function(input, output, session) {
    output$myCols <- renderText({
      paste(input$PlotThemeColour1, "and", input$PlotThemeColour2)

    })
  })

Approach #2:

Using cellArgs of splitLayout to override individual cell css.

library(shiny)
library(colourpicker)

shinyApp(
  ui = fluidPage(

    sidebarPanel(
      splitLayout(
        colourInput("PlotThemeColour1",
                    "Plot theme shade 1",
                    "#C2C2C2"),
        colourInput("PlotThemeColour2",
                    "Plot theme shade 2",
                    "#E5E5E5"), cellArgs = list (style = "overflow:visible"))),
    mainPanel(textOutput("myCols"))
    ),

  server = function(input, output, session) {
    output$myCols <- renderText({
      paste(input$PlotThemeColour1, "and", input$PlotThemeColour2)

    })
  })

Answer 2

splitLayout has cellArgs which can hold your overflow:

library(shiny)
library(colourpicker)

shinyApp(
  ui = fluidPage(
    sidebarPanel(
      splitLayout(cellArgs = list(style = "overflow: visible;"),
        colourInput("PlotThemeColour1",
                    "Plot theme shade 1",
                    "#C2C2C2"),
        colourInput("PlotThemeColour2",
                    "Plot theme shade 2",
                    "#E5E5E5"))),
    mainPanel(textOutput("myCols"))
  ),

  server = function(input, output, session) {
    output$myCols <- renderText({
      paste(input$PlotThemeColour1, "and", input$PlotThemeColour2)

    })
  })