In my Shiny app, I have several modal windows from the shinyBS package. I am able to adjust the width of these modal windows like so:
tags$head(tags$style(HTML('
.modal-lg {
width: 1200px;
}
#abs_1 {background-color: white;;}
#clear{background-color: turquoise3;;}
#disease{background-color: turquoise3;;}
#bleach{background-color: turquoise3;;}
#regionSelect{background-color: turquoise3;;}
#yearSelect{background-color: turquoise3;;}
#speciesSelect{background-color: turquoise3;;}
')))
And altering the number of pixels in the width argument changes the width of the modal windows. However, if I use height instead of width, altering the number of pixels has no effect on the height of the modal windows. Why might this be?
You want to modify the height of the modal-body. Try this:
library(shiny)
library(shinyBS)
shinyApp(
ui = basicPage(
actionButton("show", "Show modal dialog"),
tags$head(tags$style(".modal-dialog{ width:1000px}")),
tags$head(tags$style(".modal-body{ min-height:700px}")),
bsModal('boxPopUp', 'Test','test')
),
server = function(input, output,session) {
observeEvent(input$show, {
toggleModal(session, "boxPopUp", toggle = "toggle")
})
}
)
EDIT: Answer to Mark's comment below
Yes, you can use the id of the bsModal for that, see below. For example, the first style tag now applies for all div's with class .modal-dialog that are in a div with id boxPopUp1
library(shiny)
library(shinyBS)
shinyApp(
ui = basicPage(
actionButton("show1", "Show modal dialog"),
actionButton("show2", "Show modal dialog"),
tags$head(tags$style("#boxPopUp1 .modal-dialog{ width:1000px}")),
tags$head(tags$style("#boxPopUp1 .modal-body{ min-height:700px}")),
tags$head(tags$style("#boxPopUp2 .modal-dialog{ width:100px}")),
tags$head(tags$style("#boxPopUp2 .modal-body{ min-height:100px}")),
bsModal('boxPopUp1', 'Big','test'),
bsModal('boxPopUp2', 'Small','test')
),
server = function(input, output,session) {
observeEvent(input$show1, {
toggleModal(session, "boxPopUp1", toggle = "toggle")
})
observeEvent(input$show2, {
toggleModal(session, "boxPopUp2", toggle = "toggle")
})
}
)
Related
In the example below, the 'Selections Saved' notification appears in the bottom-right corner of the application. Instead I would like it to appear in the sidebar (either directly under the action button, or simply at the bottom left of the side-bar):
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
actionButton("apply", "Save Selections")
),
dashboardBody()
)
server <- function(input, output) {
observeEvent(input$apply, {
showNotification("Selections Saved", duration = 2)
})
}
shinyApp(ui, server)
I know that there are similar questions already, but these result in the notification being shown in the middle of the screen, rather than in the sidebar.
Have you tried to just change the percentages?
# bottom-left
custom_notes <- HTML(
"
.shiny-notification {
position: fixed;
top: calc(0%);
left: calc(100%);
}
"
)
And them put tags$head(tags$style(custom_notes)) inside ui, before the dashboard elements?
How can I set the modal width to 80% when bs_theme() is active? Is there a possibility within bs_theme()? I just can't get it right with the tags.
library(shiny)
library(bslib)
ui <- fluidPage(
shiny::bootstrapLib(),
theme = bs_theme(
version = 4,
bootswatch = "minty"),
tags$style(".modal-dialog{width: 80% !important;}"),
actionButton("open_modal", "open modal"),
)
server <- function(input, output) {
observeEvent(input$open_modal, {
showModal(
modalDialog(
title = "This modal isn't 80% wide")
)
})
}
shinyApp(ui = ui, server = server)
Use tags$style(".modal-dialog {max-width: 80vw;}") instead. It makes sure your modal is always 80% of the entire window, resize automatically when you change window size.
I am trying to change the colour of a button using css in R Shiny. The default bootstrap styling seems to colour the button light grey when it is pressed (i.e. during the click), but I want it to be green. I believe this is done with the :active pseudo-class selector but it doesn't work: the button is still light grey when depressed but the lime colouring of the button does work.
ui.R
ui <- fluidPage(
theme = "style.css",
actionButton("my-button", "Click me")
)
style.css
.btn, .btn:hover {
background-color: lime;
}
.btn:active {
background-color: green;
}
We can maybe use shinyjs to do that:
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
actionButton("my_button", "Click me")
)
server <- function(input, output, session) {
observeEvent(input$my_button,{
runjs('document.getElementById("my_button").style.backgroundColor = "red";')
})
}
shinyApp(ui, server)
or we can also use shinyBS package to update the button:
library(shiny)
library(shinyBS)
ui <- fluidPage(
bsButton('my_button', "Click me")
)
server <- function(input, output, session) {
observeEvent(input$my_button,{
updateButton(session,'my_button',style = "warning")
})
}
shinyApp(ui, server)
Try using :focus instead of :active
I successfully changed the text sizes in shiny dashboard interface by editing css file.
Or I use following structure:
div(DTOutput(outputId = "table"), style = "font-size:85%"))
However, I couldn't find the node name of shiny modals. Is it possible to change the text size in shiny modals through .css?
Are you looking for something like this?
shinyApp(
ui = basicPage(
actionButton("show", "Show modal dialog")
),
server = function(input, output) {
observeEvent(input$show, {
showModal(modalDialog(
title = "Important message",
div("This is an important message!", style="font-size:160%")
))
})
}
)
ModalDialog takes as its first argument(s) UI elements. This appears to be the same kind of arguments accepted by other shiny elements. Compare for example: ?siderbarPanel and ?modalDialog. So if you can do it in the body of an app, you can probably do it in a modal.
For example, I stuck a sidebar layout inside a modal:
shinyApp(
ui = basicPage(
actionButton("show", "Show modal dialog")
),
server = function(input, output) {
observeEvent(input$show, {
showModal(modalDialog(
sidebarLayout(sidebarPanel("yeah"),mainPanel("cool"))
))
})
}
)
I am writing an app and I want the image in the sidebarPanel to be just a bit bigger than the image I put inside it. As the window gets smaller or larger, so does the sidebar, but the image stays static. How do I fix this problem? Is there a way to get the sidebar length or is there a better way to render images?
ui.R
library(shiny)
shinyUI(bootstrapPage(
# Application title
titlePanel("Sidebar Image App"),
sidebarPanel(
imageOutput("image", height = "auto")
)
))
server.R
library(shiny)
shinyServer(function(input, output, session) {
output$image <- renderImage({
return(list(
src = "one.png",
contentType = "image/png",
height = 185,
alt = "Face"
))
})
})
You can style the image using css tag as below:
shinyUI(bootstrapPage(
titlePanel("Sidebar Image App"),
tags$head(tags$style(
type="text/css",
"#image img {max-width: 100%; width: 100%; height: auto}"
)),
sidebarPanel(
imageOutput("image")
)
)),
where css id selector (here #image) should correspond to the outputId of the imageOutput.