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

Question

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

For example, how could the fileInput1 and radioGroupButtons1 be made stacked and immediately adjacent to each 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)

score 1 · Answer 1 · answered Sep 01 '23 at 08:16

1

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"))
  )
)

Credit to CSS Positioning Elements Next to each other

answered Sep 01 '23 at 08:16

smartse

1,026
7
12

Thanks for you reply, smartse. Sorry for the ambiguous phrasing - I would like them one on top of the other rather than side-by-side. I edited the questions to make it clearer. – matt Sep 01 '23 at 18:24
I still don't understand what you mean - maybe create an image showing what you want? – smartse Sep 01 '23 at 18:48
I added an answer with an example showing what I wanted. – matt Sep 01 '23 at 20:39

score 0 · Answer 2 · answered Sep 01 '23 at 20:38

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)

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

2 Answers2