R Shiny中如何实现两个fileInput组件并排显示
Shiny fileInput组件并排显示实现方法
fileInput组件默认携带Bootstrap表单类样式,为块级元素,仅给外层添加display:inline-block不同时控制宽度、对齐属性的情况下,依然会触发换行,两种可直接落地的实现方案如下:
方案1:使用Shiny原生栅格系统(推荐,适配响应式布局)
依托Bootstrap 12列栅格规则,在box内部嵌套fluidRow,两个fileInput各占6列宽度即可自动并排,适配不同屏幕尺寸。
核心修改代码:
box( title = "Import Data", solidHeader = TRUE, collapsible = TRUE, width = 12, fluidRow( column(width = 6, fileInput(inputId = "file1", label = "File 1", multiple = TRUE, accept = c(".xlsx", ".txt"), width = '100%') ), column(width = 6, fileInput(inputId = "file2", label = "File 2", multiple = TRUE, accept = c(".xlsx", ".txt"), width = '100%') ) ) )
方案2:自定义inline-block样式
如果不需要响应式适配,直接给每个fileInput的外层div补充宽度、对齐属性即可:
box( div(style = "display:inline-block; width:48%; vertical-align:top;", fileInput("file1", "File 1", multiple = TRUE, accept = c(".xlsx", ".txt"), width = '100%')), div(style = "display:inline-block; width:48%; vertical-align:top;", fileInput("file2", "File 2", multiple = TRUE, accept = c(".xlsx", ".txt"), width = '100%')) )
宽度设为48%是为了预留间距避免两个组件总宽度超过容器宽度触发换行,可根据实际需求调整。
完整可运行示例(基于方案1修改):
library(shiny) library(shinydashboard) ## Header Header = dashboardHeader(title = "解决并排问题", titleWidth = 250) ## Sidebar SideBar = dashboardSidebar(sidebarMenu(menuItem(text = "测试页面",tabName = "Menu", startExpanded = TRUE))) ## Tab & Body Tab = tabItem(tabName = "Menu", fluidRow( box( title = "Import Data", solidHeader = TRUE, collapsible = TRUE, width = 12, fluidRow( column(width = 6, fileInput(inputId = "file1", label = "File 1", multiple = TRUE, accept = c(".xlsx", ".txt"), width = '100%') ), column(width = 6, fileInput(inputId = "file2", label = "File 2", multiple = TRUE, accept = c(".xlsx", ".txt"), width = '100%') ) ) ) )) 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)
内容的提问来源于stack exchange,提问作者Alejo
相关产品推荐
相关产品推荐

