SelectInput choices are hidden behind downloadButton in Shiny App

Question

I am having issues with the UI of a shiny app. In my app, the choices for my selectInputs are hidden behind a downloadButton.

library(shiny)
ui <- navbarPage(
 tabPanel("View Archive",
                          sidebarLayout(
                            sidebarPanel(
                              tags$h4("Archive Filter", style = "font-weight: 450; margin-top: 0; text-decoration: underline; text-align: center",
                              radioButtons(
                                inputId = "archive.choice",
                                label = "Select Tasks to Display",
                                choices = c("Completed" = "archive.completed", "Scheduled" = "archive.scheduled")
                              ),
                              tags$h4("Create Archive Report", style = "font-weight: 450; margin-top: 0; text-decoration: underline; text-align: center"),
                              splitLayout(cellWidths = c("50%", "50%"), 
                                  selectInput(
                                  inputId = "report.month",
                                  label = "Select Month",
                                  choices =  as.list(month.name)
                                ), 
                                selectInput(
                                  inputId = "report.year",
                                  label = "Select Year",
                                  choices =  (2020:format(Sys.Date(), "%Y"))
                                )
                                ),
                                downloadButton('downloadData', 'Download Report')
                              )
                          ))
  )
server <- function(input, output, session) {}
shinyApp(ui, server)

I've tried changing the z-index of the selectInputs but haven't had any success with that. Does anyone know a way to resolve this issue? It seems like it should be simple but I haven't been able to find a solution. Thanks in advance.

Answer 1

I changed the splitLayout approach and used a fluidRow() with two columns instead.

library(shiny)

ui <- navbarPage(
  title = 'StackOverFlow App',
  tabPanel(
    title = "First Panel",
    sidebarLayout(
      sidebarPanel = sidebarPanel(
        tags$h4("Archive Filter", style = "font-weight: 450; margin-top: 0; text-decoration: underline; text-align: center"),
        radioButtons(
          inputId = "archive.choice",
          label = "Select Tasks to Display",
          choices = c("Completed" = "archive.completed", "Scheduled" = "archive.scheduled")
        ),
        tags$h4("Create Archive Report", style = "font-weight: 450; margin-top: 0; text-decoration: underline; text-align: center"),
        fluidRow(
          column(
            width = 6,
            selectInput(
              inputId = "report.month", label = "Select Month",
              choices =  as.list(month.name)
              )
            ),
          column(
            width = 6, 
            selectInput(
              inputId = "report.year", label = "Select Year",
              choices =  (2020:format(Sys.Date(), "%Y")))
            )
          ),
        downloadButton('downloadData', 'Download Report', style='z-index:1;')
      ),
      mainPanel = mainPanel()
    )
  )
)


server <- function(input, output, session) {
  
}

shinyApp(ui, server)

To get the job down using splitLayout it would be necesary to change the css z-index property of the selectImput.