I am using bs4dash
. In one of the tabs I use leafletOutput
to display a map, which needs to fill the whole dashboardBody
(at least its width).
The following code works:
library(shiny)
library(leaflet)
library(bs4Dash)
body <- dashboardBody(
tags$head(
tags$style(
"#m {
height: calc(100vh - 57px) !important;
}"
)),
leafletOutput(outputId = "m")
)
body$children[[1]]$attribs$style <- "padding: 0px 0px !important"
ui <- dashboardPage(
dashboardHeader(title = "test"),
dashboardSidebar(),
body)
server <- function(input, output) {
output$m <- renderLeaflet({
leaflet() %>% addTiles() %>% setView(-8.44, 39.55, zoom = 14) })
}
shinyApp(ui=ui, server=server)
When I introduce tabs:
library(shiny)
library(leaflet)
library(bs4Dash)
b <- dashboardBody(
tags$head(
tags$style(
"#m {
height: calc(100vh - 57px) !important; padding: 0px 0px !important;
}"
)),
tabItem(
tabName = "tab1",
# style = "padding: 0px 0px !important",
leafletOutput(outputId = "m")
)
)
b$children[[1]]$attribs$style <- "padding: 0px 0px !important"
ui <- dashboardPage(
dashboardHeader(title = "test"),
# dashboardSidebar(),
sidebar = dashboardSidebar(
sidebarMenu(menuItem("Tab 1", tabName = "tab1")
)),
body = b)
server <- function(input, output) {
output$m <- renderLeaflet({
leaflet() %>% addTiles() %>% setView(-8.44, 39.55, zoom = 14) })
}
shinyApp(ui=ui, server=server)
it gives the error:
Error in `*tmp*`$children : object of type 'closure' is not subsettable
When looking at the resulting webpage source for both cases, in the appropriatte sections, I get: (Without tabs, working example)
<section class="content" style="padding: 0px 0px !important">
<div class="leaflet html-widget html-widget-output shiny-report-size html-fill-item-overflow-hidden html-fill-item" id="m" style="width:100%;height:400px;"></div>
</section>
(with tabs)
<section class="content">
<div role="tabpanel" class="tab-pane container-fluid" id="shiny-tab-tab1">
<div class="leaflet html-widget html-widget-output shiny-report-size html-fill-item-overflow-hidden html-fill-item" id="m" style="width:100%;height:400px;"></div>
</div>
</section>
I tried the following tags inside dashboardbody, but none work:
tags$head(
tags$style(
".content {
padding: 0px 0px !important;
}"
)),
tags$head(
tags$style(
"#shiny-tab-tab1 {
padding: 0px 0px !important;
}"
))
In the browser inspector, in the tabs example, I am able to add style="padding: 0px 0px !important
in front of class=content
, and it works.
For me, https://unleash-shiny.rinterface.com/beautify-css has been of great help in terms of learning to use css
in shiny
apps, but in this case, I'm yet to find a solution.