Shinydashboard::box 中的 splitLayout

Question

目标

我想在actionButtonaselectInput的页脚中放置 a旁边shinydashboard::box。根据this SO question splitLayout应该做我想做的。

问题

在selectInput没有填满整个空间，投入页脚时。似乎一旦在页脚中，selectInput总是采用固定的宽度。有趣的是，当将相同的元素放入框体时，控件会按预期呈现。

题

我如何管理它selectInput和actionButton

1. 彼此相邻并且
2. 跨越整条线？

代码

library(shiny)
library(shinydashboard)

boxUI <- function(width) {
  box(
    splitLayout(
      selectInput("x", NULL, paste(strrep("x", 10), 1:10)),
      actionButton("ok", icon("trash")),
      cellWidths = c("85%", "15%"),
      cellArgs = list(style = "vertical-align: top")),
    footer = splitLayout(
      selectInput("y", NULL, paste(strrep("x", 10), 1:10)),
      actionButton("ok", icon("trash")),
      cellWidths = c("85%", "15%"),
      cellArgs = list(style = "vertical-align: top")
    ), width = width, solidHeader = TRUE, status = "info", title = "Box")
}

ui <- dashboardPage(
  dashboardHeader(), 
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$style(
        HTML(".shiny-split-layout > div {
                  overflow: visible;
              }"))),
    fluidRow(
      boxUI(4),
      boxUI(3))
  ))

server <- function(input, output) {
}

shinyApp(ui, server)

Answer 1

如果您放置selectInput内部 adiv并将宽度设置为 100%，则应该可以满足您的要求。

footer = splitLayout(
    tags$div(
        selectInput("y", NULL, paste(strrep("x", 10), 1:10), width="100%")
    ),
    actionButton("ok", icon("trash")),
    cellWidths = c("85%", "15%"),
    cellArgs = list(style = "vertical-align: top")
),