Search code examples
rshinyflexdashboard

DownloadButton width in R Flexdashboard

I'm having problems to change my DownloadButton width, since he's different from actionButton (which have the width parameter).

Any easy ideas to solve it? Here's my code (Just a simple download button):

Normalidade  
=======================================================================
Inputs {.sidebar}
-----------------------------------------------------------------------
<h5>
```{r}
tags$hr()


downloadButton("downloadNormal",label = "Download seu teste", class = "butt1")


downloadHandler(
    filename = "Resultados_Normal.csv",

    content = function(file) {
      write.csv(data, file)
    }

    )

tags$hr()
tags$br()
actionButton("AjudaNormal", label = " Ajuda", icon("question-circle"),
             width = "100%",
             onclick="window.open('http://google.com', '_blank')")


```
</h5>
Solution

  • Actually, after playing around with this I recommend to use uiOutput with renderUI.

    Without using uiOutput the downloadButton function gets ignored (only the downloadHandler gets evaluated), that's why the width parameter was not set, and also you can't modify the label of the button.

    There are all solved with using uiOutput.

    ---
title: "Full width downloadButton"
output: 
  flexdashboard::flex_dashboard:
    css: styles.css
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Inputs {.sidebar}
-----------------------------------------------------------------------

```{r}
# Create placeholder for the downloadButton
uiOutput("downloadUI")
```

```{r}
# Create the actual downloadButton
output$downloadUI <- renderUI( {
  downloadButton("downBtn", "Download Iris data", style = "width:100%;")
})

# Add download handling
output$downBtn <- downloadHandler(
  filename = function() {
    "iris.csv"
  },
  content = function(file) {
    write.csv(iris, file, row.names = FALSE)
  }
)
```

    I set the width using inlineCSS with the style argument, but you can (and should) use an external style sheet if you have multiple CSS rules.

    Using an external stylesheet (CSS file)

    An external CSS file can be used in Flexdashboard by adding css: path/filename.css to the YAML header.

    ---
title: "Full width downloadButton"
output: 
  flexdashboard::flex_dashboard:
    css: styles.css
runtime: shiny
---

    In this case the app tries to read a file called styles.css in the same folder as the Rmd.

    Create the css file in the same folder and add the rule:

    #downBtn {
  width: 100%;
}

    You can now remove style = "width:100%;" from the downloadButton and still get full width button.

    Output:

    output