R光沢のリーフレット：リーフレットの高さの100％

Question

リーフレットの地図を表示するアプリを作ろうとしています。アプリを使用するユーザーは主にモバイルデバイスからアプリを使用するため、画面全体に地図を表示すると便利です。 leafletOutput("mymap", width = "100%", height = "100%")に、しかし、私は設定できない高さをhttps://js1984.shinyapps.io/stackoverflow/

それはleafletOutput("mymap", width = "100%")と幅のために正常に動作します： あなたはここにアプリを見ることができ、私はアプリを実行したときにマップが表示されなくなります...固定値作品に高さを設定しますあなたは想像しているようにオプションではありません。私がこれまでに見つかった

すべてのソリューションは、私のために動作しませんでした：設定の高さのように：100％CSSで：

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

Doan Askan（ありがとう！）のthis commentで指摘されているように、calc（）とwindow hightを使用した解決策が私に役立ちました。より精巧な例についてはSee this answerを参照してください。

Answer 2

：

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

アプリのUI部分はこのようになりますこのソリューションを参照してください。それは他のタブのための不利なかもしれないコンテナ流体クラスにCSSを適用します.... adjust.cssはwwwフォルダに入ります。基本的な考え方は、アプリがこの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%; 
    } 

にもあり here

から取られました