`width` attribute has no effect on `radioGroupButtons` and `checkboxGroupButtons`

[jassler]

In an effort to get my radioGroupButtons and checkboxGroupButtons aligned to my switchInput, I tried the following:

shiny::shinyApp(
  shiny::fluidPage(
    shinyWidgets::radioGroupButtons('r', choices = c('a', 'b', 'c'), direction = 'vertical', width = '75px'),
    shinyWidgets::checkboxGroupButtons('c', choices = c('d', 'e', 'f'), direction = 'vertical', width = '75px'),
    shinyWidgets::switchInput('s', labelWidth = 50, handleWidth = 25)
  ),
  function(input, output, session) {}
)

My thought was that the widths provided to my switchInput would add up to 75px. However changing the width in my group buttons had no effect in the UI, no matter if I set it to 75px, 100% or some number. Instead I was always given the following output.

Are there certain criterias that have to be met for the parameter to take effect?

[jassler]

So from a little bit of debugging inside my browser, it seems as though the buttons don't fill their outside parent. If I append the following line to my shiny UI, it works as I'd expect it to.

tags$script('document.querySelector("#r div").style.width = "100%"')

Or in full:

shiny::shinyApp(
  shiny::fluidPage(
    shinyWidgets::radioGroupButtons('r', choices = c('a', 'b', 'c'), direction = 'vertical', width = '100px'),
    shinyWidgets::checkboxGroupButtons('c', choices = c('d', 'e', 'f'), direction = 'vertical', width = '100px'),
    shinyWidgets::switchInput('s', labelWidth = 50, handleWidth = 25),

    tags$script('document.querySelector("#r div").style.width = "100%"'),
    tags$script('document.querySelector("#c div").style.width = "100%"')
  ),
  function(input, output, session) {}
)

[pvictor]

You can also do it with CSS for all buttons:

tags$style(".btn-group-vertical {width: 100%;}")