Remove shaded background and border of indicators in shinydashboardPlus::carousel - r

I'm using {shinydashboard} and {shinydashboardPlus} to display a carousel. When I click on the carousel indicators they are displayed with a shaded background and a blue border (this wasn't the case in an earlier version of shinydashboardPlus::carousel, I added the used package versions in the code below). I checked this in Firefox and EDGE Chromium. I want to remove both (box and border) and can't figure out how to tweek the CSS. I did already manage to hide the .carousel-caption, but after playing around some time with the DOM inspector, I've not managed to do the same for the small box around the carousel indicators.
My problem is to identify the class of the object that has the shaded background and the blue border as attributes. Once I figure that out, it should be easy to change it.
Any help appreciated.
# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3
shinyApp(ui = dashboardPage(
title = "Test",
header = dashboardHeader(),
sidebar = dashboardSidebar(disable = TRUE,
width = "0px",
collapsed = TRUE),
body = dashboardBody(
tags$head(
tags$style(HTML("
.carousel-caption {
display: none !important;
}
"))
),
carousel(
id = "mycarousel",
carouselItem(
caption = "Item 1",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
),
carouselItem(
caption = "Item 2",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
)
)
) # close dashboardBody
), # close dashboardPage
server = function(input, output) {}
)

This is due to the accessibility plugin from bootstrap that the shiny people decided to add in since 1.6. There was no problem before. This is annoying. I tried to ask them to have an option choose load or not to load this plugin on start, but they refused. You can read from this issue.
To fix your problems, I have added some CSS styles:
# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3
shinyApp(ui = dashboardPage(
title = "Test",
header = dashboardHeader(),
sidebar = dashboardSidebar(disable = TRUE,
width = "0px",
collapsed = TRUE),
body = dashboardBody(
tags$head(
tags$style(HTML("
.carousel-caption {
display: none !important;
}
a.carousel-control:focus {
outline: none;
/*change background-image to none if want to remove black bars on right*/
background-image: linear-gradient(to right, transparent 0px, rgba(0,0,0,0.5) 100%);;
box-shadow: none;
}
a.carousel-control.left:focus {
/*change background-image to none if want to remove black bars on left*/
background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
}
.carousel-tablist-highlight.focus {
outline: none;
background-color: transparent;
}
"))
),
carousel(
id = "mycarousel",
carouselItem(
caption = "Item 1",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
),
carouselItem(
caption = "Item 2",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
)
)
) # close dashboardBody
), # close dashboardPage
server = function(input, output) {}
)
The first rule was added by you. The second and third rules are to remove the ugly box when you click left and right bar, but I didn't remove the black shadows around. You can remove them following the instructions I leave as comments. The last rule is what you really want. Only leave the last one if you don't care about left and right bars.

Related

Can I add an arrow icon to my bsCollapsePanel in R Shiny?

Here is a very simple example of two collapsible panels and I would like to add an icon like an arrow or something to show that it is able to collapse.
library(shinyBS)
shinyApp(
ui =
fluidPage(
bsCollapse(id = "collapseExample", open = c("panel 1, panel 2"),
bsCollapsePanel("panel 1", "First panel content",
style = "info"),
bsCollapsePanel("panel 2", "Second panel content",
style = "warning"))
),
server =
function(input, output, session){
}
)
Also if anyone knows a way to change the css styling of the panels (like color, font size, font, text alignment, background color, etc) that would be awesome!
I did it outside Shiny in this fiddle that allows you to experiment with Bootstrap (which is the underlying basis of shinyBS).
I used this CSS.
<style>
.panel-heading .panel-title a.collapsed:after {
transform: rotate(180deg);
transition: .5s ease-in-out;
}
.panel-heading .panel-title a:after {
content:'⏶';
text-align: right;
float:right;
transition: .5s ease-in-out;
}
.panel-heading .panel-title a:not([class]):after {
transform: rotate(180deg);
}
</style>
The CSS uses the :after selector to place an arrow (as content) behind and displays it on the right-hand side of the panel (i.e. float and text-align). The other two specs a:not([class]) and a.collapsed make sure that the arrow always points into the right direction. The transitions are for show.
Place this CSS inside a tags$head element (instructions here) and it should style your panels accordingly. The head of your sample app should look like this:
shinyApp(
ui =
fluidPage(
tags$head(
# Note the wrapping of the string in HTML()
tags$style(HTML("
<!-- PUT THE CSS HERE without the surrounding <style> tag -->
")),
bsCollapse(id = "coll...
I admit I haven't tested it in a Shiny environment (only in the bootstrap fiddle). But since shinyBS is only a wrapper for Bootstrap it should work.
You can also just put a fontawesome icon next to the title "Panel 1" and "Panel 2".
library(shinyBS)
library(shiny)
shinyApp(
ui =
fluidPage(
bsCollapse(
id = "collapseExample", open = c("panel 1, panel 2"),
bsCollapsePanel(
title = div("Panel 1", icon("angle-down")), "First panel content",
style = "info"),
bsCollapsePanel(
title = div("Panel 2", icon("angle-down")), "Second panel content",
style = "warning"))
),
server =
function(input, output, session){
}
)

How to better position Next/Back button in shiny glide, in order to eliminate large white space?

The Shinyglide package is just what I need, using a carousel for grouped radio buttons giving the user many choices for data parsing.
However, the "Next" (and "Back") button occupies a large white space. I'd like to shift the button in line with the glide row (see image at bottom). Does anyone know how to do this? Is there a CSS trick? Reading through the Glide manual, the only choices are "top" and "bottom".
If moving the Next/Back button isn't possible, a secondary option is to insert (a somewhat superfluous) line of text but in line with the Next/Back buttons, to at least cover up the annoyingly large white space.
The actual panel this is for has much more information presented than in this example, so I'm trying to make the page as clean as possible.
Please see image at bottom that better explains what I'm trying to do.
Reproducible example:
library(dplyr)
library(DT)
library(shiny)
library(shinyglide)
ui <-
fluidPage(
fluidRow(div(style = "margin-top:15px"),
strong("Input choices shown in row below, click ´Next´ to see more choices:"),
column(12, glide(
height = "25",
controls_position = "top",
screen(
div(style = "margin-top:10px"),
wellPanel(
radioButtons(inputId = 'group1',
label = NULL,
choiceNames = c('By period','By MOA'),
choiceValues = c('Period','MOA'),
selected = 'Period',
inline = TRUE
),
style = "padding-top: 12px; padding-bottom: 0px;"
)
),
screen(
div(style = "margin-top:10px"),
wellPanel(
radioButtons(inputId = 'group2',
label = NULL,
choiceNames = c('Exclude CT','Include CT'),
choiceValues = c('Exclude','Include'),
selected = 'Exclude',
inline = TRUE
),
style = "padding-top: 12px; padding-bottom: 0px;"
)
)
)
)
),
DTOutput("plants")
)
server <- function(input, output, session) {
output$plants <- renderDT({iris %>% datatable(rownames = FALSE)})
}
shinyApp(ui, server)
You could use a custom control element with custom_controls, and then have it hover over the displayed screen on the top right with a container set to absolute positioning. Setting a limited width for the container will ensure that the back button won't fly too far out.
Something along these lines:
glide(custom_controls = div(class = "glide-controls", glideControls()), ...)
# Somewhere in the UI
tags$style(
".glide-controls { position: absolute; top: 18px; right: 15px; width: 160px; }"
)
Just make sure to also set controls_position = "bottom" so that the controls hover over the screen content, rather than under it.
A minimal example app:
library(shiny)
library(shinyglide)
ui <- fixedPage(
h3("Simple shinyglide app"),
tags$style(
".glide-controls { position: absolute; top: 18px; right: 15px; width: 160px; }"
),
glide(
custom_controls = div(class = "glide-controls", glideControls()),
screen(wellPanel(p("First screen."))),
screen(wellPanel(p("Second screen.")))
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)

Change navbar theme colour permanently in bs4Dash R shiny app

I am using bs4Dash (version >2.0) in a shiny app but I am unable to change the navbar color (change permanently irrespective of the dark/light theme) to yellow (#ffc107).
You can check the minimal example given in ?bs4Dash::skinSelector(). While the colour can be changed to yellow from 'Navbar themer' menu in the right control bar but I need to fix or default the header colour to yellow.
Here this is the minimal example given in skinselecter(). please use bs4dash version > 2.0 from github.
if (interactive()) {
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(
sidebarMenu(
menuItem(
text = "Item 1"
),
menuItem(
text = "Item 2"
)
)
),
body = dashboardBody(),
controlbar = dashboardControlbar(skinSelector(), pinned = TRUE),
title = "Skin Selector"
),
server = function(input, output) { }
)
}
By including below css, i was able to solve this.
.navbar-gray-dark {
background-color: #ffc107;
}
.navbar-white {
background-color: #ffc107;
}

Background color of navlistpanel/tabpanel

I actually want something similar as posted here
Change background color of tabPanel when it is active or hover over in Shiny
instead of navbarpage i want to use navlistpanel.
I have two annoying issues regarding the layout of my Dashboard. I added a picture to show what i mean. The default is this blueish colour, but i would like it to be red as a background and the color white as font. Now I kind of managed to do so, but still if you are standig/selecting the topic test1 then it's blue. How can i change or fix this?
Next thing, preferably I want to have test1 and then a submenu right below test 1 to do the filtering. Then i call that filters, and then i would like to add the two filters group variable and filter op datum.
Can anyone please help me out!
Now the filters are positioned are positioned outside the navlistpanel.
Kind regards,
Steffie
navlistPanel(well = FALSE,
tabPanel(new="", windowTitle="Test",
h4(id = "new","Test"),
tags$style("#new{color: white; background-color: #d52b1e;}"),
fluidRow(
# column(1), ## this put an extra space, dont like the look
column(2,
sidebarMenu(
uiOutput("groups")),
),
# fluidRow(
# column(2,offset = 1),
column(3,
sidebarMenu(
dateRangeInput('dateRange',
label = 'Filter op datum',
start = as.Date('2019-01-01') , end = as.Date('2019-12-31')
)
),
),
We can use css to change the colour of the navigation pills when selected. Place the css tags in the fluidpage using tags$head. To have options under a tab panel use navbarMenu and place the tabPanel calls with the navbarMenu call.
With regards to your questions in the comments, you originally set WELL=FALSE in your navlistPanel call. If you set it to TRUE, a box is placed around the navlistPanel bar. To change the background colour of this, we again make use of CSS, using the .well property. With this you can change font size, font, font color, background color, maximum width and height of the navlistPanel and so much more.
What does the syntax mean? Most of it is quite intuitive. I recommend changing some of the values like font-family to see what's actually going on. Also make use of the css tag right here on Stackoverflow. You can also learn more about css here.
library(shiny)
library(shinydashboard)
library(shinythemes)
ui <- fluidPage(
tags$head(tags$style(HTML(".nav.nav-pills.nav-stacked > .active > a, .nav.nav-pills.nav-stacked > .active > a:hover {
background-color: #d52b1e;
}
.well {
min-height: 20px;
max-width: 200px;
padding: 19px;
margin-bottom: 20px;
background-color: #2c3e50;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
font-family: 'Rock Salt', cursive;
}
"))),
navlistPanel(well = TRUE,
navbarMenu("Tests",
tabPanel("Test1",
fluidRow(
# column(1), ## this put an extra space, dont like the look
column(2,
sidebarMenu(
uiOutput("groups")),
),
# fluidRow(
# column(2,offset = 1),
column(3,
sidebarMenu(
dateRangeInput('dateRange',
label = 'Filter op datum',
start = as.Date('2019-01-01') , end = as.Date('2019-12-31')
)
),
)
)
),
tabPanel("Test 2",
"UI elements here")
),
tabPanel("Other",
"UI elements here")
)
)
server <- function(input, output){}
shinyApp(ui, server)

Style shinyWidget::dropdownButton in shinydashboard::box header

Background
I am trying to place a shinyWidget::dropdownButton in the header of a shinydashboard::box. The button should have the look and feel of the button created when using a collapsible box (box(..., collapsible = TRUE).
With the help of some JavaScript I was able to move the dropdown, which seemed to me the easier approach rather than constructing all the HTML myself.
The code below does what I want to do, however I am struggling with the css, because the elements in the dropdown are partly white on white (which makes sense I guess because they are (grand) children of class .box-tools)
What I want
I want that all controls in the dropdown look like as if I put the dropdown in the body of the box:
Goal: Dropdown in the body
Current Situation: Dropdown in the header
Questions
How can I achieve this? Which css rules do I have to use, to make sure that any kind of control looks like as if in the body of the box? Could I achieve the same behaviour even easier? (For instance by wrapping all my controls in the dropdown in another element)? I do know my basics in css but here I feel a bit at loss which rules I need to consider to get to the desired result.
Code
library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinyjs)
makeDropDown <- function(i) {
dropdownButton(
h3("Heading"),
selectInput(paste0("sel", i), "Select:", LETTERS),
downloadButton(paste0("down", i), "Load"),
circle = FALSE,
icon = icon("cog")
)
}
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
useShinyjs(),
box(solidHeader = TRUE,
status = "info",
title = "Box",
div(
makeDropDown(1),
class = "box-tools pull-right",
id = "moveme"
),
makeDropDown(2)
)
)
)
server <- function(input, output, session) {
runjs("$('.box-header').append($('#moveme').detach())")
}
shinyApp(ui, server)
You're right, some CSS rules are overwritten, you can use some inline CSS with !important to control appearance :
makeDropDown <- function(i) {
dropdownButton(
tags$div(
style = "color: black !important;", # for text
h3("Heading"),
selectInput(paste0("sel", i), "Select:", LETTERS),
downloadButton(
outputId = paste0("down", i), label = "Load",
style = "background-color: #f4f4f4 !important; color: #444 !important; border: 1px solid #ddd !important;" # for button
)
),
circle = FALSE,
icon = icon("cog")
)
}
Otherwise, maybe #DivadNojnarg have a better solution in shinydashboardPlus, I'll ask him !

Resources