如何并排放置两个fileInputs R Shiny答案

【问题标题】：How to place two fileInputs side by side R Shiny如何并排放置两个fileInputs R Shiny
【发布时间】：2021-12-03 21:27:24
【问题描述】：

我喜欢成对并排放置一组文件输入。不过，它们是一个在另一个之下。

我曾尝试在 UI 中进行操作：

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

但失败了。

我还尝试将 fileInput 小部件的宽度更改为更小，但这也不起作用。我见过其他示例，但使用不同的小部件，解决它的方法是使用 div(style="display:inline-block") 格式。

这就是为什么我要问这个小部件是否可以做我想做的事情。

可重现的例子：

这是一个可重现的例子：

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)

【问题讨论】：

假设shinydashboard（请明确表示），当它们自己渲染时，我会并排看到它们。我的猜测是封闭的小部件不够大，或者正在施加一些其他不能容忍并排的约束。我建议您需要为闪亮的 UI 组件提供更多上下文，以便布局可重现。
@r2evans，你说得对。我正在使用shinydashboard。我还添加了一个可重现的示例。事实是，在可重现示例中的文件输入下方还有两个文件输入。所以它们应该在 UI 中的数组 [[file1,file2], [file3,file4]] 中。

标签： html css r shiny widget

【解决方案1】：

使用shinydashboard 基于列和行的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)

【讨论】：

我比我自己的解决方案更喜欢这个。但是这个解决方案应该增加fileInputs 的宽度。我也会选择 6 的列宽。否则 fileInputs 太窄以至于用户无法阅读内容。
我已经对其进行了编辑，以消除他在其中的 width='30%' 参数。我认为那只是他在测试中留下的神器，但在他指定后最初将其留在了里面。

【解决方案2】：

你几乎做到了！使用 HTML/CSS 解决它，您可以添加 float: left 以便您可以并排放置框，因为默认情况下 HTML div 是堆叠的。您还想在 div 之间添加边距。 min-width 确保整个事情更具响应性。当视口变得太窄时，布局会将第二个fileInput 包裹在第一个下方。

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)

【讨论】：

酷，它有效！实际上，我有大约 8 个这样的 fileInput 小部件，一个在另一个之下。当我尝试对其他两个 fileInputs 做同样的事情时，他们不会改变......为什么会这样？
没关系。我不知道我做了什么。它有效！