R shiny downloadbutton aligned to other input elements like dateInput

Question

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 How do I align downloadButton and ActionButton in R Shiny app? and here Change download button position in a tab panel in shiny app but they don't seem to answer my questions. I also attach a screenshot with the current button position as well as the expected one.

score 3 · Accepted Answer · answered Jan 24 '23 at 00:44

3

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

answered Jan 24 '23 at 00:44

jpdugo17

6,816
2
11
23

thothal · Answer 2 · 2023-01-24T08:30:58.840

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

It's getting there but they are still not nicely aligned. Shall I play with the "margin-bottom:15px" parameter? — Angelo, Jan 23 '23 at 21:40
Actually, I just realized that now the download button is aligned with the dateInput box but not other types of input boxes like the selectInput one — Angelo, Jan 23 '23 at 21:45
Layouting several elements can be tricky. The easies approach IMHO is to use `flex` as it allows for a myriad of differnt alignment optins. You have to factor in the `shinydashboard` css styles to offset elements here and there. The developper tools are your friend as you can easily play with the several css attributes to check whihc css you'll finally need to plade everything in order. — thothal, Jan 24 '23 at 08:02
Made a small addiiton to show how to align the selectinput too. — thothal, Jan 24 '23 at 08:31
Thank you for all the help. Solution posted below by jpdugo17 seems to do the trick. — Angelo, Jan 24 '23 at 12:59

R shiny downloadbutton aligned to other input elements like dateInput

2 Answers2

Update