basic syntax question I think, but i'm stuck on it. I have an app with many elements that I try to style, for instance modalDialogs. How do I make this code specific to only modaldialog 1, and not apply to modaldialog 2?
tags$head(tags$style(".modal-body {padding: 10px}
.modal-content {-webkit-border-radius: 6px !important;-moz-border-radius: 6px !important;border-radius: 6px !important;}
.modal-dialog { width: 240px; display: inline-block; text-align: left; vertical-align: top;}
.modal-header {background-color: #339FFF; border-top-left-radius: 6px; border-top-right-radius: 6px}
.modal { text-align: right; padding-right:10px; padding-top: 24px;}
.close { font-size: 16px}"))
full demo app:
library(shiny)
ui <- fluidPage(
tags$head(tags$style(".modal-body {padding: 10px}
.modal-content {-webkit-border-radius: 6px !important;-moz-border-radius: 6px !important;border-radius: 6px !important;}
.modal-dialog { width: 240px; display: inline-block; text-align: left; vertical-align: top;}
.modal-header {background-color: #339FFF; border-top-left-radius: 6px; border-top-right-radius: 6px}
.modal { text-align: right; padding-right:10px; padding-top: 24px;}
.close { font-size: 16px}")),
h5("Hello there"), # First text on the window
br(), # empty line
actionButton(inputId = "ClickonMe", label = "button1"), # button 1
actionButton(inputId = "ClickonMe2", label = "button2") # button 2
)
server <- function(input,output,session) {
observeEvent(input$ClickonMe,{
showModal(modalDialog(
inputId = 'Dialog1',
title = HTML('<span style="color:white; font-size: 20px; font-weight:bold; font-family:sans-serif ">Display help popups<span>
<button type = "button" class="close" data-dismiss="modal" ">
<span style="color:white; ">x <span>
</button> '),
easyClose = TRUE,
footer = NULL ))
})
observeEvent(input$ClickonMe2,{
showModal(modalDialog(
inputId = 'Dialog2',
title = HTML('<span style="color:white; font-size: 20px; font-weight:bold; font-family:sans-serif ">Display help popups<span>
<button type = "button" class="close" data-dismiss="modal" ">
<span style="color:white; ">x <span>
</button> '),
easyClose = TRUE,
footer = NULL ))
})
}
shinyApp(ui, server)
thanks for helping if you can!
Mark
A possiblity: enclose the modal inside a div container with an id (e.g. modal1
):
showModal(tags$div(id="modal1", modalDialog(
inputId = 'Dialog1',
title = HTML('<span style="color:white; font-size: 20px; font-weight:bold; font-family:sans-serif ">Display help popups<span>
<button type = "button" class="close" data-dismiss="modal" ">
<span style="color:white; ">x <span>
</button> '),
easyClose = TRUE,
footer = NULL )))
and then use this css:
tags$head(tags$style("#modal1 .modal-body {padding: 10px}
#modal1 .modal-content {-webkit-border-radius: 6px !important;-moz-border-radius: 6px !important;border-radius: 6px !important;}
#modal1 .modal-dialog { width: 240px; display: inline-block; text-align: left; vertical-align: top;}
#modal1 .modal-header {background-color: #339FFF; border-top-left-radius: 6px; border-top-right-radius: 6px}
#modal1 .modal { text-align: right; padding-right:10px; padding-top: 24px;}
#modal1 .close { font-size: 16px}"))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With