主页 / coding / 问题 / 79556972
Accepted
YBS
Asked: 2025-04-05 20:44:05 +0800 CST

colourpicker-panel 部分隐藏在 rank_list 中

  • 772

colourpicker-panel在 中部分隐藏rank_list()，但在 中却不如此tagList()。有没有办法实现 CSS 属性overflow: visible或更改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)

输出

1 个回答

  1. Best Answer

    rank_list()使用 包裹容器中的元素overflow: hidden;，可剪辑下拉菜单和弹出窗口。即使您overflow: visible在面板上设置，父容器仍会剪辑它。

    我们可以使用自定义 CSS 强制overflow: visible其父.rank-list-container级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)

    在此处输入图片描述

    • 2

相关问题