Высота коробки в R Shiny

Question

Я бы хотел, чтобы поле, содержащее мою карту, имело высоту 100%, чтобы оно подходило для всех экранов.На данный момент окно не достигает дна и не адаптируется, когда я уменьшаю окно

dashboardBody(
      tabItems(
        #--------- ELEMENTS TAB "carte" --------#
        tabItem(tabName ="carte",
                fluidRow(
                  box(
                    width = 3,
                    title = "Settings",
                    status = "primary",
                    solidHeader = TRUE,
                    collapsible = TRUE,
                    useShinyalert(),br(),
                    fileInput(inputId = "zip", label = "Upload your file (.zip) :", multiple = FALSE, accept = c('.zip')), 
                    checkboxGroupInput(inputId ="indice", label ="Choose a spectral index (multiple choice possible) :", choices = c("NDVI", "NDWIGAO", "NDWIMCF", "MNDWI")),br(),
                    dateRangeInput(inputId ="dates", label = "Select the date range :", start = "", end = ""), br(),
                    textInput(inputId = "mail", label = "Enter your email address :"), br(),br(),
                    useShinyjs(),
                    extendShinyjs(text = jsResetCode),
                    div(style = "display:inline-block", actionButton("reset_button", "Refresh", icon("refresh", lib ="glyphicon"))),
                    div(style = "display:inline-block", actionButton("send", "Send now !", icon("send", lib = "glyphicon"), style = "background-color : #000000 ; color : #fff ; border-color : #717878"))                 
                  ),

                  box(
                    width = 9,
                    title = "Map",
                    status = "primary",
                    solidHeader = TRUE,
                    collapsible = FALSE,
                    height = "100%",
                    leafletOutput(outputId = "map", width="100%", height = 940)
                  )
                )
        ),

Answer 1

К сожалению height: 100% не будет работать с box в shinydashboard. Это возможно только через JavaScript в соответствии с этим Github Issue , потому что размеры макета инициируются через JavaScript.

Решение

Рассчитать фактическую высоту окна

Он состоит из двух частей:

• Первоначально вычисление и установка высоты (вычисление точного количества пикселей, которое даст высота: 100%.)
• Изменение его в любое время, когда пользователь изменяет размер окна браузера.

Код устанавливает высоту box в window height - header height - 30px (top and bottom margins).

Например: если высота окна равна 960px, заголовок dashboardHeader равен 50px, тогда высота элемента вывода будет 960 - 50 - 30 = 880px.

tags$head(tags$script('
// Define function to set height of "map" and "map_container"
setHeight = function() {
  var window_height = $(window).height();
  var header_height = $(".main-header").height();

  var boxHeight = window_height - header_height - 30;

  $("#map_container").height(boxHeight);
  $("#map").height(boxHeight - 20);
};

// Set input$box_height when the connection is established
$(document).on("shiny:connected", function(event) {
  setHeight();
});

 // Refresh the box height on every window resize event    
$(window).on("resize", function(){
  setHeight();
});

Изменить пользовательский интерфейс

На стороне пользовательского интерфейса присвойте блоку идентификатор или класс, чтобы вы могли установить его с помощью кода JS. то есть: я установил идентификатор коробки на "map_container".

box(id = "map_container",
  leafletOutput("map")
)

Полный код

Использование базового shinydashboard примера

library(shiny)
library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    tags$head(tags$script('
      // Define function to set height of "map" and "map_container"
      setHeight = function() {
        var window_height = $(window).height();
        var header_height = $(".main-header").height();

        var boxHeight = window_height - header_height - 30;

        $("#map_container").height(boxHeight);
        $("#map").height(boxHeight - 20);
      };

      // Set input$box_height when the connection is established
      $(document).on("shiny:connected", function(event) {
        setHeight();
      });

      // Refresh the box height on every window resize event    
      $(window).on("resize", function(){
        setHeight();
      });
    ')),
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(id = "map_container",
        leafletOutput("map")
      ),

      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$map <- renderLeaflet( {
    leaflet() %>%
      addProviderTiles(providers$Stamen.TonerLite,
                       options = providerTileOptions(noWrap = TRUE)
      ) %>%
      addMarkers(data = cbind(rnorm(40) * 2 + 13, rnorm(40) + 48))
  })
}

shinyApp(ui, server)