默认样式表bslib允许dateInputs和其他类似类型的小部件重叠card个容器的边界,但不允许select(ize)Inputs(据我所知).

我try 通过bs_add_rules()为.selectize-dropdown.selectize-dropdown-content调整CSSpositionz-index和其他参数,但没有成功地改变重叠行为.我想我遗漏了一些简单的东西,否则就是不理解css冲突.

简而言之,我如何才能让selectizeInput在z索引方面表现得像dateInput一样(即重叠方框,而不是通过卡片内部滚动来强制溢出)?

这是一个基本的解释:

library(shiny)
library(bslib)

ui <- page_sidebar(
  underline = F,
  theme = bs_theme(
    version = 5,
    font_scale = .8,
    bootswatch = "united",
    base_font = font_google("Roboto"),
    code_font = font_google("JetBrains Mono"),
    heading_font = font_google("Prata")
  ),
  title = "Z-index test",
  sidebar = "",
  card(
    fill = F,
    selectizeInput("test_input", "Letters: ", choices = LETTERS)
  ),
  card(
    fill = F,
    dateInput("test_date", "Dates")
  )
)

shinyApp(ui, function(input, output) {})

Session info:

shiny         1.8.0
bslib         0.6.1

谢谢!

推荐答案

修改卡片和卡体的css可以解决这个问题:

library(shiny)
library(bslib)

ui <- page_sidebar(
  underline = F,
  theme = bs_theme(
    version = 5,
    font_scale = .8,
    bootswatch = "united",
    base_font = font_google("Roboto"),
    code_font = font_google("JetBrains Mono"),
    heading_font = font_google("Prata")
  ),
  title = "Z-index test",
  sidebar = "",
  card(
    fill = F,
    style = "position:relative; z-index:1000;",
    selectizeInput("test_input", "Letters: ", choices = LETTERS)
  ),
  card(
    fill = F,
    dateInput("test_date", "Dates")
  ),
  tags$head(tags$style('.card{overflow: visible !important;}'),
            tags$style('.card-body{overflow: visible !important;}'))
)

shinyApp(ui, function(input, output) {})

Css相关问答推荐

如何防止背景重复图像被截断

当面板以Angular 上升时如何定位下拉面板

为什么我的容器的弹性包裹会导致我的自动填充网格添加额外的空轨道行?

CSS Grid我不想要的东西

如何使用混合混合模式更改动画背景上的文本 colored颜色

根据现有值计算CSS变量的新值

Z Index 复杂性 - 如何将组件放置在 div 内部以相对于其级别外部的组件具有更高的 z-index 值?

使元素不水平滚动

Tailwind CSS 不输出背景类

:is() 伪类是否支持相邻sibling 表达式中第二个元素的组合器?

当前的 html 标签没有发生两列布局

Tailwind css break-word 在输入字段中不起作用

如何为以下布局安排网格?

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

如何在 TypeScript 文件中导入 CSS 模块?

如何使用 TailwindCSS 禁用环形阴影?

CSS3 - RotateY() 居中

具有自动调整大小的自动填充行的 CSS 网格

我应该在 HTML 中为我的 IMG 指定高度和宽度属性吗?

下拉框中溢出文本的省略号