Shiny radioButtons images skewed with inline

Question

I am trying to use images in radiobuttons inside a fluidRow inside a dashboardBody but I am getting weird skewing of the buttons and images.

The problem seems to be with the row wrapping as the buttons look normal if they can fit in the first row. However, I want the size of the images to be at least the one specified in the code below and there is not enough space for them to all fit on the first row.

Has anyone had a similar problem and how did you solve it?

Here is the code:

dashboardBody(
    tabItems(
      tabItem(tabName = "prices", 
                       fluidRow(
                         column(12, radioButtons(inputId = "rb", label = "Select distribution", inline = TRUE,
                                       choiceNames = list(
                                         img(src = "Normal Distribution.png", width = 100, height = 50),
                                         img(src = "Right-Skewed Distribution.png", width = 100, height = 50),
                                         img(src = "Plateau Distribution.png", width = 100, height = 50),
                                         img(src = "Double-Peaked Distribution.png", width = 100, height = 50),
                                         img(src = "Edge Peak Distribution.png", width = 100, height = 50),
                                         img(src = "Comb Distribution.png", width = 100, height = 50)
                                       ),
                                       choiceValues = list(
                                         "Normal",
                                         "Right skewed",
                                         "Plateau",
                                         "Double peaked",
                                         "Edge peak",
                                         "Comb"
                                       )
                                    )
                                  )
                    )
    )
)
)

It's not the specifically the images - radioButtons (and checkBoxGroups) tend to do this when inline wraps over several lines. — pseudospin, Sep 01 '20 at 18:48
@pseudospin Aah, okay. I guess I'll have to find a different layout, thanks. — GreenManXY, Sep 01 '20 at 19:15
Hold up! I found this response to an old question. https://stackoverflow.com/a/46493086/13203971 Changing the first margin-left: to 10px aligned my checkboxes - maybe it'll work with your imaged radioButtons. — pseudospin, Sep 01 '20 at 19:19

score 2 · Accepted Answer · answered Sep 01 '20 at 19:42

2

To be clear, you need to add this into your ui somewhere

tags$head(
    tags$style(
      HTML(
        ".radio-inline { 
                    margin-left: 0px;
                    margin-right: 10px;
          }
         .radio-inline+.radio-inline {
                    margin-left: 0px;
                    margin-right: 10px;
          }
        "
      )
    ) 
  )

answered Sep 01 '20 at 19:42

pseudospin

2,737
1
4
19

Thanks, this looks like it will work! I will try it tomorrow. – GreenManXY Sep 01 '20 at 19:50
Awesome! it works for my issue too. I had radio buttons touching the label of the previous button. By giving 20px in margin-left, it solved the issue. I could not produce a reprex as any small reprex had no such issues. Only my whole app had the issue. – YBS Sep 02 '20 at 02:24

Shiny radioButtons images skewed with inline

1 Answers1