prettyRadioButton not wraping text

[melvidoni]

I found that when creating a prettyRadioButton, if the option is too long, it won't be wrapped to the container.

Here is a screenshot, where I'm using shinyWidgets with shinyDashboard, and my content is inside a box: Look at the zone marked in red:

[tylerlittlefield]

Also running into this, has anyone came up with a workaround? If you remove the nowrap css it will wrap but it brings with it additional display issues.

[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

[tylerlittlefield]

Exactly what I needed, thanks!