I created a shiny presentation using rmarkdown in which one of the slides includes a shinyAce editor (code below). The entire app seems to be inside a container which has a white background. I want to make the background of this container transparent using css, but has thus far I've been unable to find the right object name to apply the change to.
I've tried a simple par(bg = NA) and tooled around in the default css files in the rmarkdown, shiny, and shinyAce packages...but cant find the appropriate place to make the change.
Finally, I've included code in mainPanel to change the color of the background. However, this just seems to be an overlay on the white container because when I set body {background-color: transparent} the background remains white.
As always, any help is appreciated
---
title : "White Backgrounds are Ugly"
subtitle : "Help me make it go away"
author : "Me"
date : "Now"
output:
ioslides_presentation:
widescreen : true
runtime: shiny
---
## Basic R Plot with shinyAce
```{r, echo=FALSE}
library(shinyAce)
shinyApp(
shinyUI(
fluidPage(
sidebarLayout(
sidebarPanel(
aceEditor("code", mode="r",
value="plot(1:5, 1:5,\nxlab = 'This is side 1',\nylab = 'This is side 2',\nmain = 'This is side 3',\nsub = 'Subtitle or Caption',\naxes = TRUE,\ntype = 'p',\nlas = 0)"),
actionButton("eval", "Evaluate")),
mainPanel(list(tags$head(tags$style("body {background-color: rgba(255,130,255,1); }"))), plotOutput("output"))))),
shinyServer(function(input, output, session) {
output$output <- renderPlot({
par(bg = NA)
input$eval
return(isolate(eval(parse(text=input$code))))
})
})
)
```
Related
I would like to include a small image at the left of the title of my navbarPage, and to include another image completely at the right of this same navbarPage. I found this answer which provides the same layout than the one I would like to have. The problem is that this solution does not provide a fully reproducible example and I can't figure out how to include the chunks of code in the ui part.
Does anybody know how to make a reproducible example from this answer?
Here's what I've tried so far:
library(shiny)
ui <- navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> `</div>');
console.log(header)")
),
title = div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
This is the image called image.png. I put it in the www folder, which is placed in my app directory.
There are mainly two things to solve:
* some text is displayed on the below the navbar whereas it shouldn't be displayed at all
* the image and the text at the left are not centered
I did not make any change to your code (well except the tags$head() at the begining, but that's an add on).
The only problem with your code is not the problem in your code, is the problem in your files structure.You have to place your images inside a new folder called www (Note that the folder www is in the same place as your R code which is app.R or ui.R).
library(shiny)
ui <- fluidPage(
tags$head(
tags$link(rel = "shortcut icon", type = "image/png", href = "image.png"),
tags$title("Browser tab title")
),
navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </div>');
console.log(header)")
),
title = tags$div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Note: I've added the navbarPage inside a fluidPage because without the fluidPage, the title of the NavBarPage will be the title in the browser tab!But now the main UI is the fluidPage so it's title will be the browser title. this also gives you flexiblity to add a new image for the browser tab, different from the navbar page's tab.
Here's the screen shot of the output.
Hope this helps!
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>
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:
trying to get a dark theme to work with datatables (DT) package in a shiny application. I've tried shinytheme("cyborg") and also downloading the cyborg CSS sheet from Bootswatch, (for call in datatables, style="bootstrap") but it doesn't seem to work when I use shinytheme. I need shinytheme for the rest of the app, since the css thows off all of the plots and spacing etc. Is there a dark CSS I could use in place of shinythemes which would work with plotly and datatables?
library(shiny)
library(shinythemes)
library(DT)
ui<- fluidPage(theme = shinytheme("cyborg"),
fluidRow(column(7, DTOutput("showdata")))
)
server<-function(input, output) {
output$showdata<- DT::renderDT({
datatable(iris, rownames=F, filter="top", extensions = "Scroller", width = "100%", style="bootstrap",
options = list(deferRender = TRUE, scrollY = 300,scrollX=FALSE, scroller = TRUE, dom = 'tp'),
selection ='single' ) %>%
formatStyle(columns=colnames(iris),
backgroundColor = '#282828', color = "white")
})
}
shinyApp(ui=ui, server=server)
dark table screenshot
note that the main issue is the filter text does not appear (maybe it is white because of shinytheme)
You can make the text visible if you set the font color to black. Just include some CSS in the header like: div.dataTables_scrollHead span {color: black;}
Example UI:
ui <- fluidPage(theme = shinytheme("cyborg"),
tags$head(tags$style("div.dataTables_scrollHead span {color: black;}")),
fluidRow(column(7, DTOutput("showdata")))
)
Output:
Is there a way to color fileInput button in R shiny? It looks like it is possible as shown here on this page on github. However I cannot find the code for this to be done.
This is the simple application that I would like to modify to have the button and progress bar colored red.
In ui.R:
library(shiny)
shinyUI(fluidPage(
titlePanel("Test"),
fileInput("Test","")
))
and server.R
library(shiny)
shinyServer(
function(input, output) {
}
)
Thanks for any advice.
You can use standard Bootstrap classes to style action buttons:
library(shiny)
shinyApp(
ui=shinyUI(bootstrapPage(
actionButton("infoButton", "Info", class="btn-info"),
actionButton("warningButton", "Warning", class="btn-warning"),
actionButton("successButton", "Success", class="btn-success"),
actionButton("dangerButton", "Danger", class="btn-danger"),
actionButton("defaultButton", "Default", class="btn-default"),
actionButton("primaryButton", "Primary", class="btn-primary")
)),
server=shinyServer(function(input, output, session){
})
)
Regarding file inputs as far as I know it is not possible without using CSS directly. Page you've linked is an opened pull-request and it doesn't look like it will be merged soon.
This answer provides a good description how to create fancy upload buttons with bootstrap. It should work just fine in Shiny as well.
CSS could be used in shiny to custom your fileInput widget !
Use the following code in order to color it in red.
NB - Any browser you're using to view the app should have developer tools that let you inspect elements and see styles applied to any element. You have to right click on the relevant element and choose inspect !
library(shiny)
ui <- fluidPage(
fileInput(inputId = "Test",label = ""),
tags$style("
.btn-file {
background-color:red;
border-color: red;
}
.progress-bar {
background-color: red;
}
")
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
How do you hide rendered shiny output? Specifically, I have some figures/tables generated by shiny and I have a button, that when clicked should hide the figures/tables, and when clicked again should show them.
This is what I have so far (below), and it works somewhat, but where it's supposed to hide the renderPlot output, there is a big blank space in the document that I am trying to make go away.
It should be possible to just copy and paste this code into Rstudio and hit run document (it's rmarkdown with shiny runtime).
---
runtime: shiny
---
```{r, echo=F}
actionButton("hide", "Hide")
dat <- data.frame(a=1:10, b=rexp(10, 1/10), c=letters[sample(1:24, 10)])
renderTable({
if (input$hide %% 2 == 1)
dat
})
```
lodi dodi
```{r, echo=F}
renderPlot({
if (input$hide %% 2 == 1)
plot(b ~ a, data=dat)
})
```
this text is separated by blank space, but it shouldn't be
You can use the shinyjs package to hide elements with the hide() function (or use the toggle() function to alternate between hiding and showing). Disclaimer: I wrote that package.
I've never used it in an rmarkdown before, so I'm just going to show how to use it in a normal shiny app and use the shinyApp() function to include a full shiny app inside an rmarkdown. You can read here about how to include shiny apps inside an rmarkdown doc.
---
runtime: shiny
---
```{r, echo=F}
suppressPackageStartupMessages(
library(shinyjs)
)
dat <- data.frame(a=1:10, b=rexp(10, 1/10), c=letters[sample(1:24, 10)])
shinyApp(
ui = fluidPage(
useShinyjs(),
actionButton("hide", "Hide"),
p("Text above plot"),
plotOutput("plot"),
p("Text below plot")
),
server = function(input, output, session) {
output$plot <- renderPlot({
plot(b ~ a, data=dat)
})
observeEvent(input$hide, {
hide("plot")
# toggle("plot") if you want to alternate between hiding and showing
})
},
options = list(height = 700)
)
```
In order to be able to use hide, I had to:
install and load shinyjs
add a call to useShinyjs() in the UI
call hide or toggle on the element that you want to hide/show
I hope this helps