Related to questions here and here, I would like to change the CSS of a pickerInput menu from ShinyWidgets. I am using flexdashboard and I would like the styling to match exactly that from the selectInput menu. I realize I can do this by setting the overall theme in the YAML to bootstrap, but I'd prefer not to use a global solution.
---
title: "Testing picker styles"
output:
flexdashboard::flex_dashboard
runtime: shiny
---
```{r setup, include=F}
library(shiny)
library(flexdashboard)
library(shinyWidgets)
```
Column
-----------------------------------------------------------------------
```{r}
selectInput(inputId = "id1", label = "Select input", choices = attr(UScitiesD, "Labels"))
pickerInput(inputId = "id2", label = "Picker input", choices = attr(UScitiesD, "Labels"))
```
pickerInput is styled like a Bootstrap button, and {flexdashboard} use Bootswatch's Cosmo theme (https://bootswatch.com/3/cosmo/) that's why it appears black.
You can change the class of the button with :
options = pickerOptions(style = "btn-link")
(in pickerInput arguments)
Or you can overwrite the base style like this :
options = list("style-base" = "form-control", style = "")
Related
I can't see why the Search and Clear Buttons wrap onto the following line after Postcode.
I've used the last example from the Button Addons code from here.
https://getbootstrap.com/docs/4.0/components/input-group/.
Whilst I have not included aria-label="Recipient's username" aria-describedby="basic-addon2" as R htmltools doesn't seem to like it, I don't think it's that (as I've tried adding it in the console with no effect).
Although the Bootstrap example doesn't explicitly add the -fluid to container and flex-xl-nowrap to row, I can see their code has it in Console so tried adding it.
I've added background colours to the columns to make it clear where they are.
---
title: "Stack Overflow Bootstrap "
output: html_document
---
## Purpose
Show buttons wrapping when I don't want them to
```{r cars, echo=FALSE}
# Load packages
pacman::p_load(tidyverse, htmltools)
tagList(
htmltools::withTags(
div(class="container-fluid",
h2("Heading 2"),
div(class="row flex-xl-nowrap",
div(class="col-sm-6",
style="background-color:powderblue;",
h3("1st Column Heading 3")),
div(class="col-sm-6",
style="background-color:Cornsilk;",
h3("2nd Column Heading 3"),
div(class="input-group",
input(
type = "text",
class="form-control",
placeholder = "Postcode...",
style = "width: 80px;"
),
div(class="input-group-append",
button(
type = "submit",
class="btn btn-success",
"Search"
),
button(
type = "reset",
class="btn btn-primary",
"Clear"
)
)
)
)
)
)
)
)
```
As #RadovanMiletić pointed out, the answer is to add "display: block", i.e. change
div(class="input-group",
to
div(class="input-group", style = "display: block",
I'm trying to make a table that has both shows entries and buttons so my peers can export the data from the table.
At first when I added the tables it covered the "Show Entries" section that is usually on the top left. So I wrote this CSS code which moved the buttons to the center of the table but my "Show Entries" section is still empty.
Here is my Rmarkdown code
output: html_document
```{r}
library(readr)
library(DT)
mtcars <- mtcars
```{css echo=FALSE}
.dataTables_wrapper .dt-buttons {
float:none;
text-align:center;
}
datatable(mtcars,
extensions = 'Buttons', options = list(
dom = 'Bfrtip',
buttons = c('copy','excel', 'pdf')
)
)
This is what loads for me
How can I add the "Show Entries" feature?
Use dom = 'Blfrtip' instead of dom = 'Bfrtip'
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:
I have a flexdashboard and there is an action button that does this:
actionButton(inputId="submit",
label = "Submit answers",
class="btn btn-success",
onClick="location.href='#section-your-results';")
then an observer that does this:
observeEvent(input$submit,{
some calculation
})
The problem is that the onClick part is executed before the observeEvent is triggered. So the calculation doesn't apply to the section I'm jumping to.
What i want to do is this:
actionButton(inputId="submit",
label = "Submit answers",
class="btn btn-success")
and then have an observer that does this:
observeEvent(input$submit,{
some calculation
useShinyjs()
runjs("location.href='#section-your-results';")
}))
But for some reason the runjs command isn't being executed (I also tried replacing the location.href with an alert to confirm. Any idea on what is going wrong? I have seen this answer and tried that approach as well with no luck.
Here is (for me) a reproducible example - I expect an alert box to pop up when I click submit, but it doesn't for me
---
title: "reprex shinyjs rmd"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shinyjs)
useShinyjs(rmd = TRUE)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
onclick("submit",runjs('alert("Hello! I am an alert box!!");'))
```
### Chart B
```{r}
actionButton(inputId="submit",
label = "Submit answers",
class="btn btn-success")
```
So to get this to work I had to do two things:
Switch the location of the useShinyjs() to a non-setup chunk.
Change the onClick to an onEvent and watch for the event of the input being clicked.
I think that this is because the shiny input element disables to default click event for a button and thus shinyjs is watching for something that never happens.
Here's the reproducable example that works.
---
title: "reprex shinyjs rmd"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shinyjs)
```
Column {data-width=650}
-----------------------------------------------------------------------
```{r}
useShinyjs(rmd = TRUE)
actionButton(inputId="submit",
label = "Submit answers",
class="btn btn-success")
```
```{r}
observeEvent(input$submit, {
runjs('alert("Hello! I am an alert box!!");')
})
```
Suppose we have a group of 8 checkboxes (8 letters) and an action button which prints the label of all the selected checkboxes. What I want to do, enable and disable the state of the action button based on a condition. The condition is that if the number of selected checkboxes are between 2 and 5, then the button should be enabled, else disabled. For changing the state of the button I want to use the functions enable, disable or toggleState functions from the shinyjs package. And when the button is enabled, I will be able to trigger an event to print the numbers of selected items.
Here is what I tried until now:
---
title: "Disable Button"
runtime: shiny
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(shinyjs)
library(shiny)
```
```{r, echo=FALSE}
checkboxGroupInput("param_group", label = h3("Letters"),
choices = LETTERS[1:8])
actionButton('action', "Print")
result<-reactive({
length(input$param_group)
})
observe({
if(result()>1 & result()<=5)
enable("action")
else
disable("action")
})
txt<-eventReactive(input$action,{
cat("Number of letters selected: ",length(input$param_group))
})
renderPrint({
txt()
})
```
Took me awhile to find it, but you have to enable shinyjs to use R-markdown explicitly, it needs to setup its javascript differently in this case.
You do this by calling: useShinyjs(rmd=T) in the chunk where you are using it.
---
title: "Disable Button"
runtime: shiny
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(shinyjs)
library(shiny)
```
```{r, echo=FALSE}
useShinyjs(rmd=T)
checkboxGroupInput("param_group", label = h3("Letters"),
choices = LETTERS[1:8])
actionButton('action', "Print")
result<-reactive({
length(input$param_group)
})
observe({
useShinyjs()
if(result()>1 & result()<=5){
enable("action")
} else {
disable("action")
}
})
txt<-eventReactive(input$action,{
cat("Number of letters selected: ",length(input$param_group))
})
renderPrint({
txt()
})
Screen shot: