Broschüre in R-glänzend: 100% Höhe der Broschüre Karte

Question

Ich versuche, eine App zu erstellen, die eine Broschüre Karte zeigt. Nutzer, die die App nutzen, tun dies meist von mobilen Geräten aus. Daher wäre es praktisch, die Karte auf dem gesamten Bildschirm anzubieten. können Sie die App sehen hier: https://js1984.shinyapps.io/stackoverflow/

Es funktioniert für Breite fein mit leafletOutput("mymap", width = "100%") jedoch kann ich Höhe nicht zu leafletOutput("mymap", width = "100%", height = "100%"): die Karte verschwindet, wenn ich die app laufen ... Höheneinstellung auf einen festen Wert Werke Gut, aber ist keine Option, wie Sie sich vorstellen können.

Alle Lösungen, die ich bisher gefunden habe für mich nicht: wie Einstellung height: 100% im CSS:

html, body, #mymap { 
    height:100%; 
    width:100%; 
    padding:0px; 
    margin:0px; 
} 

Der UI Teil der App wie folgt aussieht:

ui <- navbarPage(title = "test", 
      collapsible = T, 
      position= "static-top", 
      inverse = T, 
      ##################################### 
      # the tab panel that includes the MAP 
      ##################################### 
      tabPanel("Map", 
      includeCSS(path="www/bootstrap.css"), 
         leafletOutput("mymap", width = "100%") 
      ), 
      ##################################### 
      # other tab panels 
      ##################################### 
      tabPanel("Fri", 
         fluidRow(
         includeCSS(path="www/bootstrap.css"), 
         column(6, 
           offset = 3, 
           wellPanel(
           checkboxGroupInput("freitag", 
                h3("Freitag"), 
                list_fr, 
                selected = 1 
           ) 
           ) 
         ) 
        ) 
      ), 
      tabPanel("Sat", 
         fluidRow(
         column(6, 
           offset = 3, 
           wellPanel(
           checkboxGroupInput("samstag", 
                h3("Samstag"), 
                list_sa 
           ) 
           ) 
         ) 
        ) 
      ), 
      tabPanel("Sun", 
         fluidRow(
         column(6, 
           offset = 3, 
           wellPanel(
           checkboxGroupInput("sonntag", 
                h3("Sonntag"), 
                list_so 
           ) 
           ) 
         ) 
        ) 
      ), 
      tabPanel("Mon", 
         fluidRow(
         column(6, 
           offset = 3, 
           wellPanel(
           checkboxGroupInput("montag", 
                h3("Montag"), 
                list_mo 
           ) 
           ) 
         ) 
        ) 
      ), 
      tabPanel("Tues", 
         fluidRow(
         column(6, 
           offset = 3, 
           wellPanel(
           checkboxGroupInput("dienstag", 
                h3("Dienstag"), 
                list_di 
           ) 
           ) 
         ) 
        ) 
      ) 
) 

Answer 1

Wie von Dogan Askan (danke!) In this comment aufgezeigt, hat eine Lösung mit calc() und der Fensterhöhe für mich funktioniert. See this answer für ein ausführlicheres Beispiel.

Answer 2

Siehe diese Lösung. Es wendet css auf die Container-Fluid-Klasse an, was für die anderen Registerkarten ein Nachteil sein kann. Adjust.css geht in den www-Ordner. Die Grundidee wurde von here

genommen

Die App ist auch auf dieser link

ui.R

 library(shiny) 
    library(leaflet) 

    shinyUI(tagList(
      tags$head(
        HTML("<link rel='stylesheet' type='text/css' href='adjust.css'>"), 
        HTML("<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />") 
      ), 
      navbarPage(title = "test", 
         collapsible = T, 
         position= "static-top", 
         inverse = T, 
         ##################################### 
         # the tab panel that includes the MAP 
         ##################################### 

         tabPanel("Map", 
           #tags$div(id="map",  
             leafletOutput("mymap") 
           #) 
         ), 
         ##################################### 
         # other tab panels 
         ##################################### 
         tabPanel("Fri", 
           fluidRow(

             column(6, 
               offset = 3, 
               wellPanel(
                 checkboxGroupInput("freitag", 
                      h3("Freitag"), 
                      c("1", "2", "3"), 
                      selected = 1 
                 ) 
               ) 
             ) 
           ) 
         ), 
         tabPanel("Sat", 
           fluidRow(
             column(6, 
               offset = 3, 
               wellPanel(
                 checkboxGroupInput("samstag", 
                      h3("Samstag"), 
                      c("1", "2", "3") 
                 ) 
               ) 
             ) 
           ) 
         ), 
         tabPanel("Sun", 
           fluidRow(
             column(6, 
               offset = 3, 
               wellPanel(
                 checkboxGroupInput("sonntag", 
                      h3("Sonntag"), 
                      c("1", "2", "3") 
                 ) 
               ) 
             ) 
           ) 
         ), 
         tabPanel("Mon", 
           fluidRow(
             column(6, 
               offset = 3, 
               wellPanel(
                 checkboxGroupInput("montag", 
                      h3("Montag"), 
                      c("1", "2", "3") 
                 ) 
               ) 
             ) 
           ) 
         ), 
         tabPanel("Tues", 
           fluidRow(
             column(6, 
               offset = 3, 
               wellPanel(
                 checkboxGroupInput("dienstag", 
                      h3("Dienstag"), 
                      c("1", "2", "3") 
                 ) 
               ) 
             ) 
           ) 
         ) 
      ) 
    )) 

server.R

library(shiny) 
    library(leaflet) 

    shinyServer(function(input, output) { 
      output$mymap <- renderLeaflet({ 
        points <- cbind(rnorm(40) * 2 + 13, rnorm(40) + 48) 

        leaflet() %>% 
          addProviderTiles("Stamen.TonerLite", 
              options = providerTileOptions(noWrap = TRUE) 
          ) %>% 
          addMarkers(data = points) 
      }) 
    }) 

adjust.css

body, .container-fluid { 
     padding: 0; 
     margin: 0; 
    } 

    html, body, #mymap { 

      height: 100%; 
      width: 100%; 
    }