I want to show image in download button like this link - https://jsfiddle.net/flexmonster/67yx16ec/.
In this link there is "To Excel" button, I want to replicate the same in shiny. I tried this with the code below but could not get success.
library(shiny)
library(shinydashboard)
ui <- shinyUI( dashboardPage(
dashboardHeader(
title="Styling Download Button"
),
dashboardSidebar(
tags$style(type="text/css", "#download1 {color: black; background-image: url(https://www.flexmonster.com/flexmonster/toolbar/img/toolbar/menu_xls_large.png);}"),
downloadButton("download1", label="Download with style", class = "butt1")
),
dashboardBody()
))
#server.r
server <- shinyServer(function(input, output) {})
shinyApp(ui, server)
I would recommend a SVG icon. They have better quality. Download a SVG excel icon file and put it in the www subfolder of your app. For example I downloaded this one and I named it icon-excel.svg.
library(shiny)
library(shinydashboard)
ui <- shinyUI( dashboardPage(
dashboardHeader(
title = "Styling Download Button"
),
dashboardSidebar(
downloadButton(
"download1",
label = tagList(
tags$img(src = "icon-excel.svg", width = "30", height = "30"),
tags$span("Download", style = "color: #007732; font-weight: bold")
)
),
tags$script(HTML("$('#download1').css('padding-left',2).find('>i').remove();"))
),
dashboardBody()
))
#server.r
server <- shinyServer(function(input, output) {})
shinyApp(ui, server)
Related
I would like to know how can I totally skip the title section from shinydashboard header. So the first object to see will be the toggle button that hides and display the sidebar. Now if I set titlewidth to 0 there is still a small gap between the toggle button and the beginning of the page. Something like:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
titleWidth = 0
),
dashboardSidebar(
),
dashboardBody(
)
)
server <- function(input, output){}
shinyApp(ui, server)
Would adding this bit of CSS help?
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
titleWidth = 0
),
dashboardSidebar(
),
dashboardBody(
tags$style(type="text/css",".sidebar-toggle{ position: absolute;
left: 0;
}")
)
)
server <- function(input, output){}
shinyApp(ui, server)
I need your help for my R shiny application. I want to add a logo near the title in dashboardHeader. The logo don't display in the page. Can you help me ? Thanks in advance.
This is the code :
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(title = tags$img(src='logo.JPG', height = '60', width ='60')),
dashboardSidebar(),
dashboardBody()
),
server = function(input, output) {}
)
Just create a new folder with the name "www" in the same directory as your script and add your picture in that
Your code seems to work just fine. Try this for example with an image from the internet(I just put google as an example).
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '60', width ='60')),
dashboardSidebar(),
dashboardBody()
),
server = function(input, output) {}
)
I have created a download button in my Shiny app. However I want NOT to change the background colour when clicked, which is not happening here. Below is my app -
library(shiny)
library(shinydashboard)
ui <- shinyUI( dashboardPage(
dashboardHeader(
title="Styling Download Button"
),
dashboardSidebar(
tags$style(type="text/css", "#download1 {background-color:rgba(0,0,0,0);color: black;font-family: Courier New}"),
downloadButton("download1", label="Download with style", class = "butt1")
),
dashboardBody()
))
#server.r
server <- shinyServer(function(input, output) {})
shinyApp(ui, server)
Any idea on how to keep background colour exactly same on click will be highly helpful.
Thanks,
You can make sure the #download1:active (on click) style equals the #download1 (normal) style as follows.
In the below example, I also made sure that the border-color is fixed such that no on-click effect is visible whatsoever.
library(shiny)
library(shinydashboard)
ui <- shinyUI( dashboardPage(
dashboardHeader(
title="Styling Download Button"
),
dashboardSidebar(
tags$style(type="text/css",
"#download1, #download1:active {
background-color:rgba(0,0,0,0);
color: black;
font-family: Courier New;
border-color: #ddd;
-webkit-box-shadow: 0px;
box-shadow: 0px;
}
"),
downloadButton("download1", label="Download with style", class = "butt1")
),
dashboardBody()
))
#server.r
server <- shinyServer(function(input, output) {})
shinyApp(ui, server)
How can I set the font in a text in a shiny app? Should I change it for every tags$ or is there a generic way?
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
),
dashboardBody(
)
)
server <- function(input, output) {
tags$h3(style="color:black","font-family:Calibri", "Text")
}
shinyApp(ui, server)
this is sample of the part that I want to edit:
output$tabers<-renderUI({
if(input$sec=="Introduction"){
tabsetPanel(id="I",type="tabs",tabPanel("Start", id = "StartHR",
tags$br(),
img(src='Alpha-Architect.png', align = "center",height="100%", width="50%"),
tags$br(),
tags$br(),
tags$h3(style="color:black", "About this Dashboard"),
br(),
p(style="text-align:justify; color:black;'",'Produced by',a("Alpha Architect.",
href = "https://alphaarchitect.com"),"and",a("RStudio.",
href = "http://www.reproduciblefinance.com/")),
#br(),
br(),
p(style="text-align:justify; color:black;'",'Please read our full disclosures',a("here",
href = "https://alphaarchitect.com/disclosures")),
Why do you write it in server?
To globally apply styles, you need to add styles in head of HTML.
Add this as your dashboard body:
dashboardBody(
tags$head(
tags$style("h3 {font-family:Calibri}")
)
)
I am using R-3.2.0 hosted on Red Hat Linux version 6.5 with shiny package (version 0.12.0). I am trying to utilize shinydashboard functionality to design a few reports. The RStudio version is 0.98.1103
I have successfully setup ui.R and server.R
ui.R - :
ibrary(shinydashboard)
library(htmlwidgets)
library(rpivotTable)
library(leaflet)
dashboardPage(
dashboardHeader(title="Reports",
dropdownMenu(type = "task",
messageItem(
from = "Download",
message = "test",
icon = icon("gear")
),
messageItem(
"Download",
message = "TEST",
icon = icon("life-ring"),
href= "http://www.google.com"
)
)
),
dashboardSidebar(
sidebarMenu(
menuItem("Srts", tabName = "ServiceItems", icon = icon("dashboard"))
)
),
dashboardBody(
tags$head(tags$style(
type = 'text/css',
'#test{ overflow-x: scroll; }')),
rpivotTableOutput('PivotTable')
)
)
server.R -:
library(shiny)
library(ggplot2)
library(wordcloud)
library(devtools)
library(htmlwidgets)
library(rpivotTable)
library(leaflet)
shinyServer(function(input, output) {
PivotTable <- read.csv("Book2.csv",head=TRUE,sep= ',')
output$PivotTable <- rpivotTable::renderRpivotTable({
rpivotTable(PivotTable, rows="Ar", col="DTM", aggregatorName="Count",
vals="Ar", rendererName="Table")})
tableFirst<-as.data.frame(sort(table(PivotTable$Area),decreasing=TRUE))
})
The following code to enable scrolling in the dashboard body was taken from https://github.com/smartinsightsfromdata/rpivotTable/issues/19 :-
tags$head(tags$style(
type = 'text/css',
'#test{ overflow-x: scroll; }')),
rpivotTableOutput('PivotTable')
The issue I face is that the code added to help scrolling does not work. I have stripped my code of all tabs , layouts etc but I am still enable to get scrolling to work.
I have observed that if I remove the dashboardPage command, scrolling does work but the display is very awkward and not really presentable.
However, when I combine the codes as follows (in RStudio) and run the scrolling works just fine.
library(shiny)
library(shinydashboard)
library(rpivotTable)
library(ggplot2)
PivotTable <- read.csv("Book2.csv",head=TRUE,sep= ',')
header <- dashboardHeader(title="Reports",
dropdownMenu(type = "task",
messageItem(
from = "Download",
message = "test",
icon = icon("gear")
),
messageItem(
"Download",
message = "TEST",
icon = icon("life-ring"),
href= "http://www.google.com"
)
)
)
sidebar <- dashboardSidebar()
body <- dashboardBody(
tags$head(tags$style(HTML('
.skin-blue.main-header .logo {
background-color: #3c8dbc;
}
.skin-blue .main-header .logo:hover {
background-color: #3c8dbc;
}
'))
),
tags$head(tags$style(type = 'text/css',
'#test{ overflow-x: scroll; }')),
rpivotTableOutput("test")
)
shinyApp(
ui = dashboardPage(header, sidebar, body),
server = function(input, output) {
output$test <- rpivotTable::renderRpivotTable({
rpivotTable(PivotTable, rows="Ar", col="DTM", aggregatorName="Count",vals="Ar", rendererName="Table")})
})
However, I cannot provide this as a final solution because the business users that need this are not adept at copying and pasting code on RStudio (If there is a possible way that I can use the combined code just like the usual one I can consider that as well).
Can someone please help me understand the issue with my original code that prevents scrolling.
Thanks a lot !
The problem is your CSS selector otherwise everything looks OK. Your setting the scroll-property on a element with ID test but I can't find a element with this ID in your example. Try something like this:
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
tags$head(
tags$style(
HTML("
#myScrollBox{
overflow-y: scroll;
overflow-x: hidden;
height:120px;
}
")
)
),
# Boxes need to be put in a row (or column)
fluidRow(
div(id="myScrollBox",
plotOutput("plot1", height = 250)),
box(
title = "Controls",
sliderInput("slider", "Number of observations:", 1, 100, 50)
)
)
)
)
server <- function(input, output) {
set.seed(122)
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(input$slider)]
hist(data)
})
}
shinyApp(ui, server)
You need to change the CSS selector to the element you want to put the scroll on, in the example this is "myScrollBox".
The only thing which you should be taking in to consideration is to pass the exact same id before CSS code, so in this code replace #test to #PivotTable and bingo... your code should work...
tags$head(tags$style(
type = 'text/css',
'#test{ overflow-x: scroll; }')),
rpivotTableOutput('PivotTable')