Change download button position in a tab panel in shiny app

Question

I am developing a shiny app application and use a mainPanel() with tab panels. The first tabPanel() is supposed to contain a tableOutput() together with a downloadButton(). The downloadButton() is aligned like the image below.

Only when the output table is produced it goes down. I want it to be aligned at the bottom of the table from the beginning. What should I change in my code?

Here is the code:

ui <- fluidPage(

                sidebarLayout(
                  sidebarPanel(
                        selectizeInput(inputId = "gender1",
                                  label = "Choose samples to compare",
                                  choices = genders,
                                  options = list(
                                    placeholder = 'Sample 1',
                                    onInitialize = I('function() { this.setValue(""); }'))),
                         conditionalPanel("input.gender1 != ''",
                            selectizeInput(inputId = "gender2",
                                      label = NULL,
                                      choices = '',
                                      options = list(
                                        placeholder = 'Sample 2',
                                        onInitialize = I('function() { this.setValue(""); }')))),
                         actionButton(inputId = "button", label = "Plot", 
                                 style="color: #fff; background-color: #337ab7; border-color: #2e6da4"))),

                    mainPanel(
                        tabsetPanel(
                          tabPanel("Table", tableOutput("table"),
                                   downloadButton("download", "Download", 
                                                  style="color: #fff; background-color: green; border-color: Black;")),
                          tabPanel("Volcano Plot", plotOutput("vplot",width = "550px", height="350px")),
                          tabPanel("PCA Plot", plotOutput("pcaplot",width = "550px", height="350px")),
                          tabPanel("Heatmap",plotOutput("hplot",width = "550px", height="350px")),
                          tabPanel("Manhattan plot", plotOutput("mplot"))
                    )
                    )))

server <- function(input, output,session) {
observe({
    input$gender1
    updateSelectizeInput(session, 'gender2',choices = genders[genders != input$gender1],options = list(
      placeholder = 'Sample 2',
      onInitialize = I('function() { this.setValue(""); }')))
  })
observeEvent(input$button,{output$table <- renderTable({isolate(fitData(input$gender1,input$gender2))})

output$download <- downloadHandler(
    filename = function(){paste(input$gender1,inputSamples,".csv",sep = ' with ')},
    content = function(file){
      write.csv(fittable(),file)})

shinyApp(ui = ui, server = server)

score 0 · Accepted Answer · answered Oct 11 '20 at 11:43

Try this

tabPanel("Table",
         fluidRow(column(10,tableOutput("table")),
                  column(3, style = "margin-top: 500px;",
                         downloadButton("download", "Download",
                         style="color: #fff; background-color: green; border-color: Black;"))
         )),

You should change the margin to the height of your table output. I have given 500px.

Change download button position in a tab panel in shiny app

1 Answers1

Linked