Question

目标

我想将selectInput和actionButton并排放置在我的shinydashboard::box的页脚中。无论框的宽度如何，该按钮应“相对靠近” selectInput 。

到目前为止我尝试过的事情

到目前为止，我尝试过column，splitLayout或通过display: inline-block进行样式设置，但我对以下两种解决方案都不满意：

column：根据盒子的宽度，selectInput和actionButton之间的间隙太大（我可以通过将selectInput的宽度扩展为100％，但宽度太大）
splitDesign：到目前为止，最好的选择，但是cellWidths需要根据框width进行调整，并且只能在{％{1}}宽的情况下使用，对于大框，该宽度的第二次分裂似乎太大了
selectInput：与一般的inline-block

示例

CSS

Answer 1

我希望这可能会有用。我将width = 11更改为12，对我来说似乎很好。

这就是你想要的吗？

library(shiny)
library(purrr)
library(shinydashboard)

widths <- c(1, 2,3, 4, 6, 12)

makeBoxes <- function(width, method = c("split", "col", "css")) {
method <- match.arg(method)
split <- function(width, count) {
  splitLayout(selectInput(paste("sel", width, count, sep = "_"), NULL, LETTERS,
                          width = "100%"),
              actionButton(paste("ab", width, count, sep = "_"), icon("trash")),
              cellWidths = c("87.5%", "12.5%"),
              cellArgs = list(style = "vertical-align: top"))
}
col <- function(width, count) {
  fluidRow(column(width = 12,  # width = 11 -> 12
                  selectInput(paste("sel", width, count, sep = "_"), NULL, LETTERS,
                              width = "100%")),
           column(width = 1,
                  actionButton(paste("ab", width, count, sep = "_"), icon("trash"))))
}

 css <- function(width, count) {
  fluidRow(div(selectInput(paste("sel", width, count, sep = "_"), NULL, LETTERS),
               style = "display: inline-block; vertical-align: top"),
           actionButton(paste("ab", width, count, sep = "_"), icon("trash")))
}

 wrap <- function(method, ...)
  switch(method, split = split(...), col = col(...), css = css(...))

map(seq(1, 12 / width, 1), function(count)
  box(solidHeader = TRUE, title = "Box", status = "info", width = width,
      footer = wrap(method, width, count)))
}

server <- function(input, output) {
}

ui2 <- dashboardPage(dashboardHeader(), dashboardSidebar(),
                 dashboardBody(map(widths, ~ fluidRow(makeBoxes(.x, "col")))))

shinyApp(ui2, server)

selectInput旁边的放置按钮

1 个答案: