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)
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 have an app in which I would like the main_box expand/contract icon to be in black text with a white background, and then the sub_box's options box to appear in red with white letters. Additionally, I want the sub_box's options box to remain red w/ white letters, even when hovered over or clicked.
I'm able to get the sub_box css implemented correctly, but I can't figure out how to disaggregate the sub_box css from the main_box css. Can anyone tell me what I'm doing wrong?
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(HTML("
.box.box-solid > .box-header > .box-tools .btn {
background: #fd0000;
color: #ffffff;
}
")),
box(title = "main_box", collapsible = T,
box(title = "sub_box",
dropdownMenu = dropdown(label = "Options",
"Hello World!")
)
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Current State:
Desired End State:
A simple way to distinguish those boxes is to provide them with an id - please see the following:
library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(
HTML(
"#subbox > .box-header > .box-tools .btn {
background: #fd0000;
color: #ffffff;
}"
)
),
shinydashboardPlus::box(
id = "mainbox",
title = "main_box",
collapsible = TRUE,
shinydashboardPlus::box(
id = "subbox",
title = "sub_box",
dropdownMenu = dropdown(label = "Options", "Hello World!")
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Furthermore please make sure to address namespace issues. shinydashboard::box does not have a dropdownMenu parameter - shinydashboardPlus::box has.
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)
Here is a small (silly) code of a shiny dashboard application:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(uiOutput("choices")),
dashboardBody()
)
server <- function(input,output) {
output$choices <- renderUI(radioButtons("blabla", NULL, 1:100))
}
shinyApp(ui = ui, server = server)
When you run this code, you see that if you scroll down, the nice background on the right hand side suddenly switches to black. How do I make sure that the background stays nice and uniform throughout the entire page, even if a scroll down and use ui-elements?
I know this is an old question, but I'm adding here for posterity. I did not find a fixed height to be satisfactory as it adds a permanent scrollbar.
Using .content-wrapper { overflow: auto; } seems to work as I expect. I.e.:
dashboardPage(
dashboardHeader(),
dashboardSidebar(
# ...
),
dashboardBody(
# ...
tags$head(tags$style(HTML('.content-wrapper { overflow: auto; }')))
)
)
Just overwrite fixed height to your .content-wrapper class.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
tags$head(tags$style(HTML('.content-wrapper { height: 3000px !important;}'))),
uiOutput("choices")),
dashboardBody()
)
server <- function(input,output) {
output$choices <- renderUI(radioButtons("blabla", NULL, 1:100))
}
shinyApp(ui = ui, server = server)
I'm getting stuck while building a Shiny Dashboard in R (using the shinydashboard package). I want to lock my sidebar so that it does not scroll while I look through the content of my tabs, but I'm not sure how to pull this off.
As an example, the following block of code will create a long-scrolling dashboard. It would be nice to lock the sidebar so that you can still see the menu tabs whilst scrolling through the obscenely-long data table.
library(ggplot2) ## for mpg dataset
library(shinydashboard)
## ui
ui <- dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(sidebarMenu(menuItem("MPG", tabName="mpg"))),
dashboardBody(tabItems(tabItem(tabName="mpg", fluidRow(tableOutput("mpgTable"))))))
## server
server <- function(input, output) {
output$mpgTable <- renderTable({mpg})
}
## launch dashboard
shinyApp(ui, server)
You should just add the style = "position:fixed; overflow: visible" at the ui sidebar.
library(ggplot2) ## for mpg dataset
library(shinydashboard)
## ui
ui <- dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(style = "position: fixed; overflow: visible;",
menuItem("MPG", tabName="mpg"))),
dashboardBody(
tabItems(
tabItem(tabName="mpg",
fluidRow(tableOutput("mpgTable"))))))
## server
server <- function(input, output) {
output$mpgTable <- renderTable({mpg})
}
## launch dashboard
shinyApp(ui, server)
**disclaimer: I am no css expert by any means
You can set the option in DT for the actual table but if you want to have the tab in the actual dashboard scroll free from the sidebar(assuming you aren't using a navbar based on your code) give this a shot:
the css would look like this:
.sidebar {
color: #FFF;
position: fixed;
width: 220px;
white-space: nowrap;
overflow: visible;
}
if you have a .css file working in your 'www' folder you can call it from the ui with a number of functions; so let's assume your file is named "style.css".
the ui now looks like this:
dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(
menuItem("MPG",tabName="mpg")
)
),
dashboardBody(
#here's where you throw the css into the header
tags$head(
includeCSS('www/style.css')
),
tabItems(
tabItem(tabName="mpg",
fluidRow(tableOutput("mpgTable"))
)
)
)
)
Nothing on the server side changes, but you might want to check out using DT or setting options in your table to work more easily with the data. DT package ref.
Hope this helps.
#HipHopPhysician can you post what you're trying to run? otherwise here's the simplest way to use DT as a workaround...there are a lot of options to set; so i'm just going to give the default:
library(ggplot2)
library(DT)
library(shinydashboard)
ui <-
dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(
menuItem("MPG",tabName="mpg")
)
),
dashboardBody(
#here's where you throw the css into the header
tags$head(
includeCSS('www/style.css')
),
tabItems(
tabItem(tabName="mpg",
dataTableOutput("mpgTable"))
)
)
)
server <- function(input, output) {
output$mpgTable <- renderDataTable({ mpg })
}