splitLayout in shinydashboard::box

Question

Goal

I want to place an actionButton next to a selectInput in the footer of a shinydashboard::box. According to this SO question splitLayout should do what I want.

Problem

The selectInput does not fill the whole space, when put into the footer. It seems that once in the footer the selectInput always takes a fixed width. Funny enough, when the same elements are put into the body of the box, the controls render as foreseen.

Question

How do I manage that selectInput and the actionButton

1. are next to each other AND
2. span the whole line?

Code

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

If you place the selectInput inside a div and set the width to 100%, that should give you what you're looking for.

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")
),