shinywidget dropdownButton CSS tag - css

I'm using the dropdownButton widget but i'm struggling with the css.
I have tried this:
dropdownButton(inputId = "MyDropDownB1",
tags$div(style = "background-color: #393D3F !important;",
checkboxGroupInput(...)
),
circle = F, status = "info", icon = icon("gear"), width = "300px",
label="Recruitment"
)
that changes the color of the panel but i still have white margins.
I would like to have all the css in a specific .css file rather than in the tag$div. Which is the tag that I should use in my .css file to target the dropdownButton button and panel?

I used an example code from shinyWidgets as you've not shared any MWE
#dropdown-menu-MyDropDownB1 the one you've to target in your css. As you can see this is based on the id name that you've given in your dropdownButton
# NOT RUN {
## Only run examples in interactive R sessions
if (interactive()) {
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
tags$head(tags$style(HTML("#dropdown-menu-MyDropDownB1 {
background-color: #393D3F !important;}
")))
,
dropdownButton(inputId = "MyDropDownB1",
checkboxGroupInput("icons", "Choose icons:",
choiceNames =
list(icon("calendar"), icon("bed"),
icon("cog"), icon("bug")),
choiceValues =
list("calendar", "bed", "cog", "bug")
),
circle = F, status = "info", icon = icon("gear"), width = "300px",
label="Recruitment"
),
tags$div(style = "height: 140px;"), # spacing
verbatimTextOutput(outputId = "out"),
verbatimTextOutput(outputId = "state")
)
server <- function(input, output, session) {
output$out <- renderPrint({
cat(
" # n\n", input$n, "\n",
"# na\n", input$na
)
})
output$state <- renderPrint({
cat("Open:", input$mydropdown_state)
})
}
shinyApp(ui, server)
}
# }

Related

Adding action button (icon) on top right corner of the shiny dashboard box

I would require an action button icon on the top right corner of the shiny dashboard box. The below code appends the icons 'refresh' and 'plus' adjacent to the 'Title1'. However, I would require the icons to be placed at the right side end of the header bar (Similar to the positions of minimize, restore and close button in windows application).
library(shiny)
library(shinydashboard)
body <- dashboardBody(
fluidRow(
box(
title = p("Title 1",
actionButton("titleBtId", "", icon = icon("refresh"),
class = "btn-xs", title = "Update"),
actionButton('titleBtid2', '', icon = icon('plus'),
class='btn-xs', title = 'update')
),
width = 4, solidHeader = TRUE, status = "warning",
uiOutput("boxContentUI2")
)
)
)
ui <- dashboardPage(
dashboardHeader(title = "Row layout"),
dashboardSidebar(),
body
)
server = function(input, output, session) {
output$boxContentUI2 <- renderUI({
input$titleBtId
pre(paste(sample(LETTERS,10), collapse = ", "))
})
}
shinyApp(ui = ui, server = server)
Add a style declaration with absolute positioning to your action buttons.
library(shiny)
library(shinydashboard)
body <- dashboardBody(
fluidRow(
box(
title = p("Title 1",
actionButton("titleBtId", "", icon = icon("refresh"),
class = "btn-xs", title = "Update", style = "position: absolute; right: 40px"),
actionButton('titleBtid2', '', icon = icon('plus'),
class = 'btn-xs', title = 'update', style = "position: absolute; right: 10px")
),
width = 4, solidHeader = TRUE, status = "warning",
uiOutput("boxContentUI2")
)
)
)
ui <- dashboardPage(
dashboardHeader(title = "Row layout"),
dashboardSidebar(),
body
)
server = function(input, output, session) {
output$boxContentUI2 <- renderUI({
input$titleBtId
pre(paste(sample(LETTERS,10), collapse = ", "))
})
}
shinyApp(ui = ui, server = server)

R shiny: slickROutput disappears when switching tabpanel()

I am making a Shiny app with tabPanels embedded in a navbarPage.
In each tabPanel, I generate a serie of image. When switching from one panel to the other one, the image loaded in one of them disappear.
I have to "refresh" manually the page to see it again. The problem seems similar than the one posted here but I cannot really subset my tabPanels, even though I gave $id and value to them.
Here is a reproducible example:
library(shiny)
library(shinythemes)
library(slickR)
## ui ----
# Image list
imgs <- list(
stackoverflow =
"https://upload.wikimedia.org/wikipedia/fr/9/95/Stack_Overflow_website_logo.png",
stackexchange =
"https://upload.wikimedia.org/wikipedia/commons/6/6f/Stack_Exchange_Logo.png"
)
ui <- navbarPage(title = div(
HTML('<span style="font-size:180%;color:white;font-weight:bold;"> Navbarpage</span></a>'),
tags$style(style = 'position:absolute; right:42px;'),
tags$style(HTML("#panel1{font-size: 25px}")),
tags$style(HTML("#panel2{font-size: 25px}")),
tags$style(HTML("#panel_about{font-size: 25px}"))
),
theme = shinytheme("flatly"),
windowTitle = "Navbarpage",
id = "navbar",
## First tabpanel ----
tabPanel(h1(id = "panel1", "Panel 1"), value = 1, fluid = TRUE,
fluidRow(column(4,
selectInput("img_list", "Image list",
choices = imgs,
selected = imgs[1])),
column(8,
slickROutput("plot_panel1"))),
),
tabPanel(h1(id = "panel2", "Panel 2"), value = 2, fluid = TRUE,
fluidRow(column(4,
selectInput("img_list", "Image list",
choices = imgs,
selected = imgs[1])),
column(8,
slickROutput("plot_panel2"))),
)
) # closes navbarpage
## server ----
server <- function(input, output, session){
observe({
output$plot_panel1 <- renderSlickR({
slick1 <- slick_list(slick_div(
input$img_list,
css = htmltools::css(width = "100%", margin.left = "auto",
margin.right = "auto"),
type = "img", links = NULL))
slickR(slick1)
})
})
observe({
output$plot_panel2 <- renderSlickR({
slick2 <- slick_list(slick_div(
input$img_list,
css = htmltools::css(width = "100%", margin.left = "auto",
margin.right = "auto"),
type = "img", links = NULL))
slickR(slick2)
})
})
}
shinyApp(ui, server)
And what it produces:
When there are multiple slickR objects to be rendered, you need to use a unique slideId for each. Furthermore you should not wrap render* functions in observe and use the same id for two selectInputs.
Please check the following:
library(shiny)
library(shinythemes)
library(slickR)
## ui ----
# Image list
imgs <- list(
stackoverflow =
"https://upload.wikimedia.org/wikipedia/fr/9/95/Stack_Overflow_website_logo.png",
stackexchange =
"https://upload.wikimedia.org/wikipedia/commons/6/6f/Stack_Exchange_Logo.png"
)
ui <- navbarPage(title = div(
HTML('<span style="font-size:180%;color:white;font-weight:bold;"> Navbarpage</span></a>'),
tags$style(style = 'position:absolute; right:42px;'),
tags$style(HTML("#panel1{font-size: 25px}")),
tags$style(HTML("#panel2{font-size: 25px}")),
tags$style(HTML("#panel_about{font-size: 25px}"))
),
theme = shinytheme("flatly"),
windowTitle = "Navbarpage",
id = "navbar",
## First tabpanel ----
tabPanel(h1(id = "panel1", "Panel 1"), value = 1, fluid = TRUE,
fluidRow(column(4,
selectInput("img_list1", "Image list",
choices = imgs,
selected = imgs[1])),
column(8,
slickROutput("plot_panel1"))),
),
tabPanel(h1(id = "panel2", "Panel 2"), value = 2, fluid = TRUE,
fluidRow(column(4,
selectInput("img_list2", "Image list",
choices = imgs,
selected = imgs[1])),
column(8,
slickROutput("plot_panel2"))),
)
) # closes navbarpage
## server ----
server <- function(input, output, session){
output$plot_panel1 <- renderSlickR({
slick1 <- slick_list(slick_div(
input$img_list1,
css = htmltools::css(width = "100%", margin.left = "auto",
margin.right = "auto"),
type = "img", links = NULL))
slickR(slick1, slideId = "slide1")
})
output$plot_panel2 <- renderSlickR({
slick2 <- slick_list(slick_div(
input$img_list2,
css = htmltools::css(width = "100%", margin.left = "auto",
margin.right = "auto"),
type = "img", links = NULL))
slickR(slick2, slideId = "slide2")
})
}
shinyApp(ui, server)

How to adjust Shiny modalDialog() width to a DT object to fully show the table information?

I do have a table with a width that is bigger than the modalDialog() element which display it. I would like this specific modialDialog() (I do have others in the app that I don't want to modify) to have a sufficient width to fully display the DT object.
I tried to use the size = "l" argument of modalDialog() without success. Could someone help me to figure out to do this? Strangely I was not able to find any clues on that despite some css changes that impact all modals.
Below a minimal example:
require(shiny)
require(DT)
shinyApp(
ui = basicPage(
actionButton("show", "Show modal dialog")
),
server = function(input, output) {
# Render DT
output$dt <- DT::renderDT(cbind(iris, iris))
# Modal management
observeEvent(input$show, {
showModal(
modalDialog(
size = "l",
easyClose = T,
DT::DTOutput("dt"),
footer = tagList(
modalButton("Cancel"),
actionButton("ok", "OK")
)
)
)
})
}
)
Had a similar problem. I fixed by making css changes.
Try changing your ui to:
ui = basicPage(
tags$style(
type = 'text/css',
'.modal-dialog { width: fit-content !important; }'
),
actionButton("show", "Show modal dialog")
),
EDIT:
You could go about defining your own modal function (I just copied the modalDialog function) as the original does not let you add a class to the modal-dialog. I am simply pasting the variable idcss into the div created by the original function.
Furthermore I did the css only for one modal. Also sorry for the bad variable-names and input-names (just slapped an s on to make them differ).
require(shiny)
require(DT)
mymodal <- function (..., title = NULL, footer = modalButton("Dismiss"),
size = c("m", "s", "l"), easyClose = FALSE, fade = TRUE, idcss = "")
{
size <- match.arg(size)
cls <- if (fade)
"modal fade"
else "modal"
div(id = "shiny-modal", class = cls, tabindex = "-1", `data-backdrop` = if (!easyClose)
"static", `data-keyboard` = if (!easyClose)
"false", div(class = paste("modal-dialog", idcss), class = switch(size,
s = "modal-sm",
m = NULL,
l = "modal-lg"),
div(class = "modal-content",
if (!is.null(title))
div(class = "modal-header", tags$h4(class = "modal-title",
title)
),
div(class = "modal-body", ...),
if (!is.null(footer))
div(class = "modal-footer", footer))
),
tags$script("$('#shiny-modal').modal().focus();"))
}
shinyApp(
ui = basicPage(
tags$style(
type = 'text/css',
'.modal-dialog.test{ width: fit-content !important; }'
),
actionButton("show", "Show modal dialog"),
actionButton("shows", "Show modal dialog2")
),
server = function(input, output) {
# Render DT
output$dt <- DT::renderDT(cbind(iris, iris))
# Modal management
observeEvent(input$show, {
showModal(
mymodal(easyClose = T,
DT::DTOutput("dt"),
footer = tagList(
modalButton("Cancel"),
actionButton("ok", "OK")
),
idcss = "test"
)
)
})
observeEvent(input$shows, {
showModal(
mymodal(easyClose = T,
DT::DTOutput("dt"),
footer = tagList(
modalButton("Cancel"),
actionButton("ok", "OK")
),
idcss = "tests"
)
)
})
}
)

Adjusting the title

Is there a R function to adjust the title " Factors under the dataset " and "Numbers under the dataset". Below is the code I have tried. So I need the title at the middle of the grey coloured bar
library(shiny)
ui <- fluidPage(
tabsetPanel(tabPanel(
"Factor_Univariate_Analysis",sidebarLayout(
sidebarPanel(
column(h6(selectInput("se1","Factors under the dataset",choices =
c("","Add","sub"))),width = 11,height= 20,offset = 0),width = 1000),
mainPanel(h5(plotOutput("Plot1",width = 1000,height = 1500)))
)
),
tabPanel(
"Numeric_Univariate_Analysis",sidebarLayout(
sidebarPanel(
column(h6(selectInput("se2","Numbers under the dataset",choices =
c("","mean","median","standard_deviation","Data Distribution"))),width
= 11,height= 20,offset = 0),width = 1000),
mainPanel(h5(plotOutput("Plot2",width = 1500,height = 500)))
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Here is some code which I think is close to what you want to do, I'll just explain a few things first:
I have five years experience as a web developer, so I enjoy using CSS, and I would recommend using it where ever possible. What I beleive you were trying to do is give the label a background, this can be done with CSS. In this case I have put it in the style and html tags. label {} applies styles to all labels. You might want to agust the background color.
I have removed the side panel layouts.
Hopefully you find this helpful.
library(shiny)
ui <- fluidPage(
tags$style(HTML("
label {
width: 100%;
background: lightgrey;
padding: 5px;
border-radius: 5px;
}
")),
tabsetPanel(
tabPanel(
"Factor_Univariate_Analysis",
div(
column(width = 12,
h6(
selectInput(
"se1",
label = "Factors under the dataset",
choices = c("","Add","sub"),
width = "100%"
)
)
),
div(plotOutput("Plot1",width = 1000,height = 1500))
)
),
tabPanel(
"Numeric_Univariate_Analysis",
column(width = 12,
h6(
selectInput(
"se2",
"Numbers under the dataset",
choices = c("","mean","median","standard_deviation","Data Distribution"),
width = "100%"
)
)
),
div(plotOutput("Plot2",width = 1500,height = 500))
)
)
)
server <- function(input, output, session) {
observe({
print(input$se1)
updateSelectInput(session, input$se1, label = "Factors under the dataset replaced")
})
}
# https://shiny.rstudio.com/reference/shiny/latest/updateSelectInput.html
shinyApp(ui, server)

Change background color of selectInput in R Shiny

My example code:
library(shiny)
server <- function(input, output) {
}
ui <- fluidPage(
br(),
selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE),
br(),
selectInput("select2", "Choose: ", c("Alt2.1", "Alt2.2"), selected = c("Alt2.1"), selectize = FALSE, multiple = TRUE)
)
shinyApp(ui = ui, server = server)
How do I have to change the code so that the background color of the widgets is red for select1 and blue for select2?
EDIT:
I tried this:
div(selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE), style = "background-color: red")
But this is not what I am looking for! Instead I want the background of the options to be red!
Edited as requested in the comments below
You can add CSS through style tags as follows:
library(shiny)
server <- function(input, output) {
}
ui <- fluidPage(
br(),
tags$style("#select1 {border: 2px solid #dd4b39;}"),
selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE),
br(),
tags$style("#select2 {background-color:blue;}"),
selectInput("select2", "Choose: ", c("Alt2.1", "Alt2.2"), selected = c("Alt2.1"), selectize = FALSE, multiple = TRUE)
)
shinyApp(ui = ui, server = server)
You can add the following as a last argument to your fluidPage:
tags$style(
HTML('
#select1{
background-color: #ff0000;
}
#select2{
background-color: #0000ff;
}
'
)
)
That way you are adding custom CSS to your app. Passing this to fluidPage should do the job for small changes but if you adjust a lot of elements with CSS you might find it easier to save a .css file in the www directory of your app.

Resources