如何使闪亮的`selectInput()`溢出`bslib::navset_card_pill()`?

huangapple go评论74阅读模式
英文:

How can I make a shiny `selectInput()` overflow a `bslib::navset_card_pill()`?

问题

The issue:
我的问题是我的selectInput()被卡片的下边框切断了:

library(shiny) # 版本 1.7.4
library(bslib) # 版本 0.5.0

ui <- page_fluid(
  navset_card_pill(nav_panel(
    title = "No overflow :(",
    selectInput("test", NULL, letters)
  ))
)

server <- function(input, output, server) {}

shinyApp(ui, server)

如何使闪亮的`selectInput()`溢出`bslib::navset_card_pill()`?

A solution with card():
我已经成功使用card()解决了这个问题,因为它允许您为卡片/卡片主体设置自定义类。但是navset_card_pill()nav_panel()不允许这样做,所以这个特定的解决方案不适用。

ui <- page_fluid(
  tags$head(tags$style(HTML("
    .foo {
      overflow: visible !important;
    }
  "))),
  
  card(
    class = "foo",
    selectInput("test", NULL, letters),
    wrapper = function(...) card_body(..., class = "foo")
  )
)

server <- function(input, output, server) {}

shinyApp(ui, server)

如何使闪亮的`selectInput()`溢出`bslib::navset_card_pill()`?

Edit #1:
我现在找到了一个解决方案,涉及修改多个CSS类,如下所示:

ui <- page_fluid(
  tags$head(tags$style(HTML("
    .bslib-card, .tab-content, .tab-pane, .card-body {
      overflow: visible !important;
    }
  "))),
  navset_card_pill(nav_panel(
    title = "Overflow achieved!",
    selectInput("test", NULL, letters)
  ))
)

但这并不理想 - 理想情况下,我希望在不修改应用程序中的这些类的“全局”默认值的情况下实现此行为。

英文:

The issue:

My problem is that my selectInput() is cut off by the lower border of the card:

library(shiny) # Version 1.7.4
library(bslib) # Version 0.5.0

ui <- page_fluid(
  navset_card_pill(nav_panel(
    title = "No overflow :(",
    selectInput("test", NULL, letters)
  ))
)

server <- function(input, output, server) {}

shinyApp(ui, server)

如何使闪亮的`selectInput()`溢出`bslib::navset_card_pill()`?

A solution with card():

I've managed to solve the problem using card(), as this allows you to set a custom class for the card/card body. However navset_card_pill() and nav_panel() don't allow this, so this particular solution doesn't carry over.

ui <- page_fluid(
  tags$head(tags$style(HTML("
    .foo {
      overflow: visible !important;
    }
  "))),
  
  card(
    class = "foo",
    selectInput("test", NULL, letters),
    wrapper = function(...) card_body(..., class = "foo")
  )
)

server <- function(input, output, server) {}

shinyApp(ui, server)

如何使闪亮的`selectInput()`溢出`bslib::navset_card_pill()`?

Edit #1

I've now found a solution which involves modifying several css classes as follows:

ui <- page_fluid(
  tags$head(tags$style(HTML("
    .bslib-card, .tab-content, .tab-pane, .card-body {
      overflow: visible !important;
    }
  "))),
  navset_card_pill(nav_panel(
    title = "Overflow achieved!",
    selectInput("test", NULL, letters)
  ))
)

This isn't ideal though - ideally I'd like to achieve this behaviour without modifying 'global' defaults for these classes throughout my app.

答案1

得分: 1

如果你使用 shinyWidgets::pickerInput,你可以通过设置 options = list(container = "body") 来让下拉框溢出。

shinyWidgets::pickerInput("test", NULL, letters, options = list(container = "body"))
英文:

If you use shinyWidgets::pickerInput, you can let the dropdown overflow by setting options = list(container = "body")

shinyWidgets::pickerInput("test", NULL, letters, options = list(container = "body"))

huangapple
  • 本文由 发表于 2023年6月8日 20:27:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/76431862.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定