CODEWITHSUNDEEP
rbuttonshiny
ViviG
ViviG

Reputation: 1726

How do I align downloadButton and ActionButton in R Shiny app?

I have a Shiny app that has two buttons on the sidebar, but I can't align them. I tried the solution given here (Shiny R aligning buttons), but it did not work for me.

Here is how they look like. enter image description here

Here is a reproducible code:


library(shiny)
library(DBI)
library(shinydashboard)
library(DT)
library(shinyjs)


ui <- dashboardPage(
#Header 
  dashboardHeader(title = "Labware dashboard"),
#Sidebar with download button  
  dashboardSidebar(
    width = 130,
    downloadButton('downloadData',
                   'Download',
                   style = "color: #fff; background-color: #27ae60; border-color: #fff"),
#Create a button in the sidebar to stop app
    useShinyjs(),
    extendShinyjs(text = jscode, functions = ("closeWindow")),
    actionButton("close", "Close window", 
                icon("close"),
               style = "color: #fff; background-color: red; border-color: #fff")
  ),
  
  dashboardBody()
  
  )


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

  #close the app
  observeEvent(input$close, {
    js$closeWindow()
    stopApp()
  })#   session$onSessionEnded(stopApp) 
}


shinyApp(ui, server)

It looks like actionButton and downloadButton don't have the same formatting because if I replace one with another (two of the same button type) I get them aligned, but I have no idea on how to change their placement. Any ideas?

Upvotes: 2

Views: 2393

Answers (1)

HubertL
HubertL

Reputation: 19544

It's because they don't have same margins, but you can fix css like this:

downloadButton('downloadData',
               'Download',
               style = "color: #fff; background-color: #27ae60; border-color: #fff;padding: 5px 14px 5px 14px;margin: 5px 5px 5px 5px; ")

actionButton("close", "Close window" ,
             icon("close"),
             style = "color: #fff; background-color: red; border-color: #fff;width:130;padding: 5px 5px 5px 5px;margin: 5px 5px 5px 5px; ")

app

Upvotes: 9

Related Questions