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.
Related
shinydashboard allows you to set the dashboardSidebar as collapsed or not by default with the collapsed argument. This works on expected on normal sized screens, but not with small screens (e.g., on mobile). How would I get the menu to appear not collapsed when the page loads, even if the user is on a small screen?
The issue can be observed from the following MWE. Just zoom in on the page to see the dashboard collapse automatically (which is how the page renders normally on mobile):
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(collapsed = FALSE),
dashboardBody(
textOutput("res")
)
)
server <- function(input, output, session) {
output$res <- renderText({
if (input$sidebarCollapsed) {
"Sidebar is collapsed"
} else {
"Sidebar is expanded"
}
})
}
shinyApp(ui, server)
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"))
))
})
}
)
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")
})
}
)
I am using Shiny to build a web app. I am adding a button that will show/hide some element on the page. But after the element got hide, other page componemt does not resize themselves to fill the screen. For example, I try to hide the sidebar of a sidebarLayout, by using toggle function in shinyjs. Here's the code I have:
library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(sidebarLayout(
sidebarPanel(id="sidebar"),
mainPanel(wellPanel(actionButton("sideBarControl", label = "Show/Hide")))
)))
server <- function(input, output) {
observeEvent(input$sideBarControl, {
shinyjs::toggle(id = "sidebar")
# potentially some statements here to fix the layout? But what should they be?
})
}
shinyApp(ui = ui, server = server)
The sidebar hides/shows when clicking sidebarControl button correctly, but instead of resize mainPanel to fill the screen, it shifts mainPanel to the left, and left a space at the right. How to resolve this? See the pictures below:
Let me respond to the comment to my previous suggestion. Since this is quite different from the previous, I write a new answer instead of editing it.
In general, you can inspect what HTML code is generated from your UI description by running the command on console. For example,
sidebarPanel(id="sidebar", actionButton("b", "btn"))
##<div class="col-sm-4">
## <form class="well" id="sidebar">
## <button id="b" type="button" class="btn btn-default action-button">btn</button>
## </form>
##</div>
This tells us that sidebarPanel function generates a nested framework of
div with class col-sm-4; and
form with the supplied id
The reason why your example code did not shifts the main panel is clear now; Even if you hide sidebar, which is the form inside, there still is div that encloses it.
So we would like a way to hide the div. Unfortunately, I could not find a way to do so with sidebarPanel function. An alternative is to use column function.
column(width=3, id="col", actionButton("b", "btn"))
##<div class="col-sm-3" id="col">
## <button id="b" type="button" class="btn btn-default action-button">btn</button>
##</div>
You can see that the output of column is kind of similar to that of sidebarPanel. Importantly, column allows you to give an ID to the div element.
So, here is a toy example that shifts the main panel to the left (i.e. fully hide the sidebar).
library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
column(width=4, id="spcol", actionButton("dummy", "dummy")),
column(width=8, wellPanel(actionButton("sideBarControl",
label = "Show/Hide")))
)))
server <- function(input, output) {
observeEvent(input$sideBarControl, {
shinyjs::toggle(id = "spcol")
})
}
shinyApp(ui = ui, server = server)
Now, let's tackle on your second point, that is, letting the main panel to fill, instead of shifting.
mainPanel()
##<div class="col-sm-8"></div>
So it does not fill because its width is set as 8. We want to change it to 12, and we can use toggleClass function from shinyjs library for that. In short, toggleClass adds a class to an element if it does not have one, and removes the class if it already does.
I believe the code below behaves as we wish.
library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
column(width=4, id="spcol", actionButton("dummy", "dummy")),
column(width=8, id="main", wellPanel(actionButton("sideBarControl",
label = "Show/Hide")))
)))
server <- function(input, output) {
observeEvent(input$sideBarControl, {
shinyjs::toggle(id = "spcol")
shinyjs::toggleClass("main", "col-sm-8")
shinyjs::toggleClass("main", "col-sm-12")
})
}
shinyApp(ui = ui, server = server)
Also, here is another working example code, in which two versions of main panels with different widths are hidden and shown by turn.
library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
column(width=4, id="spcol", actionButton("dummy", "dummy")),
column(width=8, id="main1", wellPanel(actionButton("sideBarControl",
label = "Show/Hide"))),
column(width=12, id="main2", wellPanel(actionButton("sideBarControl2",
label = "Show/Hide")))
)))
server <- function(input, output) {
shinyjs::toggle(id = "main2")
observeEvent(input$sideBarControl+input$sideBarControl2, {
shinyjs::toggle(id = "spcol")
shinyjs::toggle(id = "main1")
shinyjs::toggle(id = "main2")
})
}
shinyApp(ui = ui, server = server)
How about you try shinydashboard? It has the behavior you are looking for by default.
https://rstudio.github.io/shinydashboard/get_started.html
I have a plot which is set to 100% width (default) in the main panel of a two-panel page in R Shiny. The sidebar is hideable through a toggle action button.
When the sidebar is visible (default), the plot fills the width of the main panel. When the sidebar is hidden, I want the plot to expand to fill 100% of the space now available, i.e. the whole browser window. But this does not happen! It keeps the same size.
library(shiny)
library(shinyBS)
UI <- fluidPage(
bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
sidebarLayout(
conditionalPanel(condition = "input.showpanel == true",
sidebarPanel("This is my sidebar.")
),
mainPanel(plotOutput("plot", width = "100%"))
)
)
SERVER <- function(input, output) {
output$plot <- renderPlot({
plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
})
}
runApp(shinyApp(UI,SERVER))
Attempted so far:
Defining the plot object from within the UI file, as above.
Defining the plot object from within the server file, as a renderUI object.
Set CSS tag in the page as per tags$head(tags$style("#myplot{height:100vh !important;}")) from this question, Scaling shiny plots to window height.
Possible work-arounds:
Make the width of the plot dynamic and depending on the state of the toggle button. Then I can make the plot e.g. 140% width when the sidebar is hidden. This does not generalise well, and loses the point of using the adaptability of fluidPage.
(fluidPage changes the layout dependent on the browser window size. For example, if you make your browser window about the size of a mobile phone, it will place the sidebar above the main panel.)
#konvas answer is really good and probably the way you wan't to do this but if you want to use the sidebarLayout (and for the sake of giving another answer) you can use jQuery to toggle the bootstrap columns like:
library(shiny)
ui <- fluidPage(
tags$head(
tags$script(
HTML("
$(document).ready(function(){
// Mark columns we want to toggle
$('body').find('div [class=col-sm-4]').addClass('sidebarPanel');
$('body').find('div [class=col-sm-8]').addClass('mainPanel');
})
Shiny.addCustomMessageHandler ('resize',function (message) {
$('.sidebarPanel').toggle();
$('.mainPanel').toggleClass('col-sm-8 col-sm-12');
$(window).trigger('resize')
});
")
)
),
actionButton("showpanel", "Show/hide sidebar"),
sidebarLayout(
sidebarPanel("This is my sidebar."),
mainPanel(plotOutput("plot", width = "100%"))
)
)
server <- function(input, output, session) {
observeEvent(input$showpanel,{
session$sendCustomMessage(type = 'resize', message = 1)
})
output$plot <- renderPlot({
plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
})
}
runApp(shinyApp(ui,server))
The same methodology would apply if you use columns in a fluidRow or something similar.
One way to do this would be to use a reactive layout (there are many questions on this eg Switch between layouts reactively with shiny). In your case that would be something like
library(shiny)
library(shinyBS)
UI <- shinyUI(
fluidPage(
bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
uiOutput('ui')
)
)
SERVER <- function(input, output) {
output$ui <- renderUI({
if (input$showpanel) {
sidebarLayout(
sidebarPanel("This is my sidebar."),
mainPanel(plotOutput('plot'))
)
} else {
plotOutput('plot')
}
})
output$plot <- renderPlot({
plot(1:10, main = "The width of this plot adjusts\nto window resizes and to\nshow/hide sidepanel!")
})
}
runApp(shinyApp(UI,SERVER))