Question 242645 in CSS Question posted in
Some basic documentation can be found here.

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

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)
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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)

  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search