css - R - 闪亮的 radioGroupButtons 在查看器中渲染效果不佳

Question

我使用了这里的一些逻辑 How to put shiny radioGroupButtons into columns 并且似乎无法让布局在查看器窗格中正确显示。这些按钮在 Chrome 中看起来不错。我不知道如何解决它。

library(shiny)
library(shinyWidgets)
library(stringr)

# need radioGroupButtons to be in columns
my_css <-
  ".btn {
    padding:2px;
    width: 250px;
    height: 60px;
  }

  .btn-group, .btn-group-vertical {
    column-count: 3;
    column-width: 0;
  }"

# if you're not familiar with local() it just prevents clutter in the global env
# by just returning the last object
button_options <- local({
  first_3 <- "^([^ ]* ){3}"
  sample_sentences <- sentences[1:9]
  paste(
    "<big>", str_extract(sample_sentences, first_3),
    "</big><br>", str_remove(sample_sentences, first_3)
  )
})
  
# build gadget
ui <- fluidPage(
  tags$head(tags$style(HTML(my_css))),
  shinyWidgets::radioGroupButtons(
    inputId = "buttons",
    label = NULL,
    choices = button_options
  )  
)

server <- function(input, output) {}

runGadget(shinyApp(ui, server))

Answer 1

修复是使用 CSS 网格代替：

.btn-group-container-sw {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

.radiobtn {
    width: 100%;
}