How to change the size and spacing of check boxes and radio buttons in Shiny app?

Question

How do you:

1. Change the size of check boxes and radio buttons in Shiny?

2. Change the vertical spacing between the boxes/buttons?

I'm brand new to Shiny (day 1), so I'm sorry if this seems obvious.

Follow-up: what are some good sources to learn formatting lexicon??

---

My Code so far:

ui <- fluidPage(

  sidebarPanel(width = 3,

    fluidRow(
      column(6,offset=0,
        div(style = "font-size: 8px;",      
          selectInput(inputId = "size",
            label = "Tree Size",
            choices = c("All","Canopy","Subcanopy","Small"),
            selected = "All"),
        )
      ),

      column(6,offset=0,
        div(style = "font-size: 8px;padding:0px;",
          checkboxGroupInput(inputId = "labels",
             label = "Labels",
             choices = c("SPEC","Plot-End","Plot-Start"),
             selected = c("SPEC","Plot-End","Plot-Start")
          )    
        )
      )
    ),

    fluidRow(
      column(6,offset=0,
        div(style = "font-size: 8px;",      
          radioButtons(inputId = "data",
          label = "Data",
          choices = c("PSP Only","PSP + MAP"),
          selected = "PSP + MAP")
        )    
      ),

      column(2,offset=0,
        div(style = "font-size: 8px;padding:0px;",  
          radioButtons(inputId = "freq",
            label = "Frequency",
            choices = c(0.025,0.05),
            selected = 0.05)
        )
      )
    )
  )

  mainPanel(
    plotOutput(outputId = "plot")
  )
)

server <- function(input, output) {

  output$nms <- renderPlot({
    plot(runif(99),runif(99))

  })

}

shinyApp(ui = ui, server = server)

(Again, I am just starting to learn this stuff, so my code is probably crap - sorry!).

Answer 1

I'm surprised there is no answer yet; it is a good question. You will likely want to learn some basic CSS if you are interested in custom styling. Usually for Shiny, I would create a separate/external file for the CSS style document, but I included it in the R script for simplicity in this example. Unfortunately, styling radio buttons and checkboxes is not the easiest task if you are new to CSS and can vary across browsers, but the example code here will work well in Chrome at least. Radio buttons should work similarly, but not the exact same. Adding -webkit-transform: scale(1.5); to .checkbox is also an option for webkit browsers. You would add the code below inside fluidPage() as the first item (before sidebarPanel):

  tags$style("
      .checkbox { /* checkbox is a div class*/
        line-height: 30px;
        margin-bottom: 40px; /*set the margin, so boxes don't overlap*/
      }
      input[type='checkbox']{ /* style for checkboxes */
        width: 30px; /*Desired width*/
        height: 30px; /*Desired height*/
        line-height: 30px; 
      }
      span { 
          margin-left: 15px;  /*set the margin, so boxes don't overlap labels*/
          line-height: 30px; 
      }
  "),

To make sure you are styling the right components, you will need to check the HTML tags while building the page. Looking at the structure below can give insight as to why I needed to style certain elements in my code above.