How to place two fileInputs side by side R Shiny

user_12185028 0
Viewed 226

Id like to place a set of fileInputs side by side in pairs. They are placed one below another though.

I've attempted doing inside the UI:

box(
    div(style="display:inline-block", fileInput("file1", "File 1")),
    div(style="display:inline-block", fileInput("file2", "File 2")) 
)

but failed.

I also tried changing the width of the fileInput widget to be smaller, but that also doesnt work. I've seen other examples but with different widgets and the aproach to solve it was with the div(style="display:inline-block") format.

That's why I'm asking if doing what I want is even possible for this widget.

Reproducible example:

Here is a reproducible example:

library(shiny)
library(shinydashboard)

## Header
Header = dashboardHeader(title = "Help! :(", titleWidth = 250)

## Sidebar
SideBar = dashboardSidebar(sidebarMenu(menuItem(text = "Help me please",tabName = "Menu", startExpanded = TRUE)))

## Tab & Body
Tab = tabItem(tabName = "Menu",
                         fluidRow(
                               box(
                                 title = "Import Data",
                                 solidHeader = TRUE, 
                                 collapsible = TRUE,
                                 width = 12,
                             
                                     fileInput(inputId = "file1",
                                               label = "File 1",
                                               multiple = TRUE,
                                               accept = c(".xlsx", ".txt"),
                                               width = '30%'),
                             
                                     fileInput(inputId = "file2",
                                               label = "File 2",
                                               multiple = TRUE,
                                               accept = c(".xlsx", ".txt"),
                                               width = '30%')
                               )
                         ))

Body = dashboardBody(tabItems(Tab))

## UI
ui = dashboardPage(header = Header,
                   sidebar = SideBar,
                   body = Body,
                   skin = "red")

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

}

## ShinyApp
shinyApp(ui,server)
shiny r widget css html
2 Answers

Use shinydashboard column and row based layout:

library(shiny)
library(shinydashboard)

## Header
Header = dashboardHeader(title = "Help! :(", titleWidth = 250)

## Sidebar
SideBar = dashboardSidebar(sidebarMenu(menuItem(text = "Help me please",tabName = "Menu", startExpanded = TRUE)))

## Tab & Body
Tab = tabItem(tabName = "Menu",
              fluidRow(
                  box(
                      title = "Import Data",
                      solidHeader = TRUE, 
                      collapsible = TRUE,
                      width = 12,
                      fluidRow(
                          column(width = 3, 
                                 fileInput(inputId = "file1",
                                           label = "File 1",
                                           multiple = TRUE,
                                           accept = c(".xlsx", ".txt"))
                          ),
                          column(width = 3, 
                                 fileInput(inputId = "file2",
                                           label = "File 2",
                                           multiple = TRUE,
                                           accept = c(".xlsx", ".txt"))
                          )
                      ),
                      fluidRow(
                          column(width = 3, 
                                 fileInput(inputId = "file3",
                                           label = "File 3",
                                           multiple = TRUE,
                                           accept = c(".xlsx", ".txt"))
                          ),
                          column(width = 3, 
                                 fileInput(inputId = "file4",
                                           label = "File 4",
                                           multiple = TRUE,
                                           accept = c(".xlsx", ".txt"))
                          )
                      )
                  ))
)

Body = dashboardBody(tabItems(Tab))

## UI
ui = dashboardPage(header = Header,
                   sidebar = SideBar,
                   body = Body,
                   skin = "red")

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

## ShinyApp
shinyApp(ui,server)
user_53510870

You almost did it! Solving it wth HTML/CSS you can add float: left so you can place the boxes side by side because HTML divs are stacked by default. You my also want to add a margin between the divs. min-width makes sure that the whole thing is more responsive. When the viewport gets too narrow, the layout will wrap the second fileInput below the first.

library(shiny)
library(shinydashboard)

## Header
Header = dashboardHeader(title = "Help! :(", titleWidth = 250)

## Sidebar
SideBar = dashboardSidebar(sidebarMenu(menuItem(text = "Help me please",tabName = "Menu", startExpanded = TRUE)))

## Tab & Body
Tab = tabItem(tabName = "Menu",
              fluidRow(
                box(
                  title = "Import Data",
                  solidHeader = TRUE, 
                  collapsible = TRUE,
                  width = 12,
                  div(
                    fileInput(inputId = "file1",
                              label = "File 1",
                              multiple = TRUE,
                              accept = c(".xlsx", ".txt")),
                    style="min-width:200px;max-width:45%; float:left; margin-right:2.5%"),
                  div(
                    fileInput(inputId = "file2",
                              label = "File 2",
                              multiple = TRUE,
                              accept = c(".xlsx", ".txt")),
                    style="min-width:200px;max-width:45%; float:left")
              )))

Body = dashboardBody(tabItems(Tab))

## UI
ui = dashboardPage(header = Header,
                   sidebar = SideBar,
                   body = Body,
                   skin = "red")

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

## ShinyApp
shinyApp(ui,server)
user_132415450
Related