R - shiny radioGroupButtons 在查看器中无法很好地呈现

Question

I used some of the logic from here How to put shiny radioGroupButtons into columns and can't seem to get the layout to look correctly in the viewer pane. The buttons look fine in Chrome. I'm not sure how to fix it.

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

The fix was using a CSS grid instead:

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

.radiobtn {
    width: 100%;
}