CODEWITHSUNDEEP
htmlcssrshinyfluid-layout
guyabel
guyabel

Reputation: 8366

bottom align a button in R shiny

I cannot figure out a way to bottom align downloadButton with a selectizeInput, i.e.,

enter image description here

library(shiny)

runApp(list(
  ui = shinyUI(fluidPage(
    fluidRow(align="bottom",
      column(12, align="bottom",
             h4("Download Options:"),
             fluidRow(align="bottom", 
                      column(6, selectizeInput("plot_dl", "File Type", width="100%",  
                                               choices = list("PDF"="pdf","PNG"="png"))),
                      column(3, downloadButton('plot1_dl', 'Left Plot')),
                      column(3, downloadButton('plot2_dl', 'Right Plot'))
             )
      )
    ),
    tags$style(type='text/css', "#plot1_dl { width:100%; vertical-align:bottom}"),
    tags$style(type='text/css', "#plot2_dl { width:100%;}")
  )),
  server = function(input, output) {
  }
))

Placing align="bottom" anywhere and everywhere does not throw an error message, but does not have the desired effect either. Tried playing around with the style tags of the buttons, but well out my depth.

Upvotes: 30

Views: 17828

Answers (2)

r4ndomw4lk
r4ndomw4lk

Reputation: 573

Other way to do it is to pass style argument in the column function.

runApp(list(
        ui = shinyUI(fluidPage(
                h4("Download Options:"),
                fluidRow(
                        column(6, selectizeInput("plot_dl", "File Type", width="100%",
                                                 choices = list("PDF"="pdf","PNG"="png"))),
                        column(3, style = "margin-top: 25px;", downloadButton('plot1_dl', 'Left Plot')),
                        column(3, style = "margin-top: 25px;", downloadButton('plot2_dl', 'Right Plot'))
                )
        )),
        server = function(input, output) {
        }
))

Upvotes: 28

guyabel
guyabel

Reputation: 8366

Found an ad-hoc fix with margin-top: 25px in the style tag...

enter image description here

library(shiny)

runApp(list(
  ui = shinyUI(fluidPage(
     h4("Download Options:"),
     fluidRow(
       column(6, selectizeInput("plot_dl", "File Type", width="100%",
                                choices = list("PDF"="pdf","PNG"="png"))),
       column(3, downloadButton('plot1_dl', 'Left Plot')),
       column(3, downloadButton('plot2_dl', 'Right Plot'))
     ),
     tags$style(type='text/css', "#plot1_dl { width:100%; margin-top: 25px;}"),
     tags$style(type='text/css', "#plot2_dl { width:100%; margin-top: 25px;}")
  )),
  server = function(input, output) {
  }
))

Upvotes: 29

Related Questions