Is it possible to reduce space around shinyWidgets radioGroupButtons and shiny fileInput?

54 Views Asked by At

Is it possible to adjust space around specific instances of radioGroupButtons and fileInput?

For example, how could the fileInput1 and radioGroupButtons1 be made stacked one on top of the other?

library(shiny)
library(shinyWidgets)
library(bslib)

# UI
ui = page_fillable(
  fileInput("fileInput1", label = NULL),
  radioGroupButtons("radioGroupButtons1", choices = c("TSV", "CSV", "XLSX")),
  
  fileInput("fileInput2", label = NULL),
  radioGroupButtons("radioGroupButtons2", choices = c("PDF", "PNG", "JPEG"))
)

# Server
server = function(input, output, session)
{
}

shinyApp(ui, server)
2

There are 2 best solutions below

0
matt On BEST ANSWER

smartse reminded me there is a progress bar at the bottom of the fileInput element. The arrangement I was looking for can be achieved by adjusting its margin:

library(shiny)
library(shinyWidgets)
library(bslib)

# UI
ui = page_fillable(

  # Adjust margin of progress bar
  tags$style("#fileInput1_progress { margin: -24px; }"),

  fileInput("fileInput1", label = NULL),
  radioGroupButtons("radioGroupButtons1", choices = c("TSV", "CSV", "XLSX")),
  
  fileInput("fileInput2", label = NULL),
  radioGroupButtons("radioGroupButtons2", choices = c("PDF", "PNG", "JPEG"))
)

# Server
server = function(input, output, session)
{
}

shinyApp(ui, server)
3
smartse On

I'm not sure if this is what you mean. It could maybe do with more tweaking to adjust the whitespace between them too but the progress bar shows up beneath when the file is uploaded.

ui = page_fillable(
  tags$head(
  tags$style(type="text/css", 
       ".radio_style .form-group {float:left; display:inline; width: 300px;}")),
  div(class='radio_style', 
  fileInput("fileInput1", label = NULL),
  radioGroupButtons("radioGroupButtons1", choices = c("TSV", "CSV", "XLSX"))
  ),
  div(class='radio_style', 
  fileInput("fileInput2", label = NULL),
  radioGroupButtons("radioGroupButtons2", choices = c("PDF", "PNG", "JPEG"))
  )
)

enter image description here

Credit to CSS Positioning Elements Next to each other