1

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.

enter image description here

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))
M--
  • 25,431
  • 8
  • 61
  • 93
yake84
  • 3,004
  • 2
  • 19
  • 35
  • If they work good on chrome why fix it? – Bruno Jan 24 '21 at 20:53
  • 1
    It needs to be displayed in RStudio's viewer pane. It's an addin for a package I am working on and will need to run with `runGadget(..., viewer = paneViewer())` or `runGadget(..., viewer = dialogViewer())` – yake84 Jan 24 '21 at 20:58

1 Answers1

0

The fix was using a CSS grid instead:

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

.radiobtn {
    width: 100%;
}
yake84
  • 3,004
  • 2
  • 19
  • 35