0

I am using 'radioGroupButtons' of the shinyWidgets package with the option individual = TRUE. The buttons are positioned tightly side-by-side.

I have two questions. Is is possible to get more space between the buttons? Is is also possible to get the button labels preceded by a icon (Glyphicon, Font Awesome)?

It would be great if it would look like this:

enter image description here

My code is as follows:

library(shiny)
library(shinyjs)
library(shinyWidgets)

ui <- fluidPage(
  useShinyjs(),

  radioGroupButtons(
    inputId = "id000",
    label = NULL,
    choices = c("Text",  "File", "Web"),
    individual = TRUE,
    selected = character(0))
)

server <- function(input, output, session)
{
  observeEvent(input$id000, alert(input$id000), ignoreInit = TRUE)
}

shinyApp(ui = ui, server = server)
WJH
  • 539
  • 5
  • 14

1 Answers1

1

This ought to work:

library(shiny)
library(shinyjs)
library(shinyWidgets)

ui <- fluidPage(
  useShinyjs(),
  tags$head(tags$style('.btn-group{ margin-left: 15px;}')),  # add the spacing
  icon(NULL),  # need a call to icon to attach some dependencies; probably a better solution exists
  radioGroupButtons(
    inputId = "id000",
    label = NULL,
    choices = c(`<i class='fas fa-font'></i> Text` = "Text",
                `<i class='far fa-file-alt'></i> File` = "File", 
                `<i class='fas fa-globe-americas'></i> Web` = "Web"),
    individual = TRUE,
    selected = character(0))
)

server <- function(input, output, session)
{
  observeEvent(input$id000, alert(input$id000), ignoreInit = TRUE)
}

shinyApp(ui = ui, server = server)

To find more icons check the links in ?icon.

bobbel
  • 1,983
  • 6
  • 21
  • Thanks, works well! Within 'fluidPage' I added 'align="center". Then to keep the buttons centered I changed 'margin-left: 15px;' into 'margin-left: 7px; margin-right: 7px;'. – WJH Jan 16 '20 at 16:09