R shiny downloadbutton aligned to other input elements like dateInput-CodePudding

I have an R shiny app with different download buttons as illustrated in the code below. The issue is that the position of the download button within fluidRow is not automatically aligned with the positions of other input elements like dateInput below.

ui <- dashboardPage(  
  title = "Test Dashboard",  # this is the name of the tab in Chrome browserr
  dashboardHeader(title = "Web Portal"),
  
  dashboardSidebar(   
    sidebarMenu(

      menuItem('Retail', tabName = "retail", icon = icon("th"),
               menuItem('Dashboard', tabName = 'retail_dashboard'))
    )
  ),

  dashboardBody( 
      tabItem(tabName = "retail_dashboard",
              tabsetPanel(type = "tabs",
                          tabPanel("Dashboard",
                                   h3("Test."),
                                   
                                   fluidRow(column(2,
                                                   dateInput("idx_muni_tot_ret_start_dt", label = "Start Date:", value = Sys.Date()-10)), #  1yr ago
                                            column(2,
                                                   dateInput("idx_muni_tot_ret_end_dt", label = "End Date:", value = Sys.Date())),
                                            column(2,
                                                   downloadButton("download_idx_muni_TR_data","Download Data"))
                                            )
                                     )
                                    )           
              )
              )
)


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

cat("\nLaunching   'shinyApp' ....")
shinyApp(ui, server)

I found similar questions here

CodePudding user response：

A workaround is to simulate a label on top of the download button and add 5px of margin-bottom.

column(
  width = 2,
  div(tags$label(), style = "margin-bottom: 5px"),
  div(downloadButton("download_idx_muni_TR_data", "Download Data"))
)

CodePudding user response：

A bit of css does the trick:

ui <- dashboardPage(  
   title = "Test Dashboard", 
   dashboardHeader(title = "Web Portal"),
   dashboardSidebar(   
   ),
   dashboardBody( 
      h3("Test."),
      fluidRow(column(2,
                      dateInput("idx_muni_tot_ret_start_dt", 
                                label = "Start Date:", value = Sys.Date() - 10)),
               column(2,
                      dateInput("idx_muni_tot_ret_end_dt", 
                                label = "End Date:", value = Sys.Date())),
               column(2,
                      div(style = "margin-bottom:15px",
                          downloadButton("download_idx_muni_TR_data","Download Data")))
               , style = "display:flex;align-items:end")
   )
)

Update

If you want to add a selectInput you need yet some new css tweaks to get the input on the same line:

ui <- dashboardPage(  
   title = "Test Dashboard", 
   dashboardHeader(title = "Web Portal"),
   dashboardSidebar(),
   dashboardBody( 
      h3("Test."),
      fluidRow(column(2,
                      dateInput("idx_muni_tot_ret_start_dt", 
                                label = "Start Date:", value = Sys.Date() - 10)),
               column(2,
                      dateInput("idx_muni_tot_ret_end_dt", 
                                label = "End Date:", value = Sys.Date())),
               column(2,
                      tagAppendAttributes(selectInput("slc", "Select", LETTERS), style="margin-bottom:10px")),
               column(2,
                      div(style = "margin-bottom:15px",
                          downloadButton("download_idx_muni_TR_data","Download Data"))),
               style = "display:flex;align-items:end")
   )
)