Display fullwidth leaflet map inside dashboard tab using bs4Dash

43 views Asked by At

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.

0

There are 0 answers