0

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"))
```

enter image description here

fawda123
  • 479
  • 3
  • 12

1 Answers1

2

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)

enter image description here

Or you can overwrite the base style like this :

options = list("style-base" = "form-control", style = "")

enter image description here

Victorp
  • 13,636
  • 2
  • 51
  • 55
  • Thanks @Victorp, anyway to make the heights the same and round the corners? I was looking for literal "exact". – fawda123 Jun 24 '20 at 16:46