prettyRadioButtons' answer options don't wrap based on screen size

[ixodid198]

Why do the long answer options of this prettyRadioButtons question not automatically wrap based on the screen size? Below are two screenshots of the Chrome browser's Inspect mode simulating different devices.

Even manually setting the width to "300px" doesn't wrap the answer options.

Chrome > Inspect > Responsive

Chrome > Inspect > iPhone SE

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  
              prettyRadioButtons(
                inputId = "a",
                label = "Group A",
                selected = NULL,
                status = "primary",
                shape = c("round"),
                width = NULL,
                choiceNames = c("Lorem Ipsum is simply dummy text of the ",
                                "printing and typesetting industry.Lorem Ipsum has",
                                "been the industry's standard dummy text ever since the 1500s, when an unknown printer"), 
                choiceValues = c("opt1", "opt2", "opt3")
              )
)

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

shinyApp(ui, server)```

[pvictor]

Hello,

You can try to use following CSS to make the text according to container:

.pretty {
	 white-space: normal;
	 margin-bottom: 5px;
}
 .pretty .state label {
	 line-height: 1.5em;
	 margin-top: -4px;
}
 .pretty .state label::after, .pretty .state label::before {
	 top: -2px;
}

In Shiny:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  
  tags$style(
    ".pretty {
      white-space: normal;
      margin-bottom: 5px;
    }
    .pretty .state label {
      line-height: 1.5em;
      margin-top: -4px;
    }
    .pretty .state label::after, .pretty .state label::before {
      top: -2px;
    }"
  ),
  
  tags$div(
    style = "width: 250px; border: 1px red solid;",
    prettyRadioButtons(
      inputId = "a",
      label = "Group A",
      selected = NULL,
      status = "primary",
      shape = c("round"),
      width = NULL,
      choiceNames = c(
        "Lorem Ipsum is simply dummy text of the ",
        "printing and typesetting industry.Lorem Ipsum has",
        "been the industry's standard dummy text ever since the 1500s, when an unknown printer"
      ), 
      choiceValues = c("opt1", "opt2", "opt3")
    )
  )
)

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

shinyApp(ui, server)

Result should look like:

Victor