Make height:100% the default for most containers

DESCRIPTION

@@ -22,7 +22,7 @@ Suggests:
     gt,
     shinytest2
 Config/testthat/edition: 3
-RoxygenNote: 7.2.0
+RoxygenNote: 7.2.3
 Roxygen: list(markdown = TRUE)
 VignetteBuilder: knitr
 Imports: 

NEWS.md

@@ -1,3 +1,8 @@
+# Development
+
+### Minor new features and improvements
+- Now the default container height is 100% for any container other than `grid_page()`. This helps avoid confusing sizing when layout is embedded in other containers like a card. 
+
 # gridlayout 0.2.1
 
 ### Minor new features and improvements

R/grid_container.R

@@ -69,7 +69,8 @@ grid_container <- function(
   flag_mismatches = TRUE,
   row_sizes = NULL,
   col_sizes = NULL,
-  gap_size = NULL
+  gap_size = NULL,
+  container_height = NULL
 ) {
 
   # Check to make sure we match all the names in the layout to all the names in
@@ -79,13 +80,13 @@ grid_container <- function(
   if(missing(layout)){
     stop("Need a defined layout for page")
   }
-
   # Make sure we're working with a layout
   layout <- if (is_gridlayout(layout) ) layout else new_gridlayout(
     layout_def = layout,
     row_sizes = row_sizes,
     col_sizes = col_sizes,
-    gap_size  = gap_size
+    gap_size  = gap_size,
+    container_height = container_height
   )
 
 
@@ -145,4 +146,4 @@ gridlayout_css_dep <- function() {
     script = "gridlayout.js",
     version = "1.0"
   )
-}
+}

R/grid_page.R

@@ -7,6 +7,9 @@
 #' the element should be placed in.
 #'
 #' @inheritParams grid_container
+#' @param container_height Optional parameter to control height of page.
+#'  Defaults to `"viewport"` so app takes up full vertical space of page.
+#'  See argument of same name in `new_gridlayout()` for more options.
 #' @param theme Optional argument to pass to `theme` argument of
 #'   \code{\link[shiny]{fluidPage}}.
 #' @param flag_mismatches Should mismatches between the named arguments and
@@ -27,6 +30,7 @@ grid_page <- function(layout,
                       row_sizes = NULL,
                       col_sizes = NULL,
                       gap_size = NULL,
+                      container_height = "viewport",
                       theme = bslib::bs_theme(version = 5),
                       flag_mismatches = FALSE) {
   dot_args <- list(...)
@@ -53,6 +57,7 @@ grid_page <- function(layout,
       row_sizes = row_sizes,
       col_sizes = col_sizes,
       gap_size = gap_size,
+      container_height=container_height,
       # This is used to prevent a randomly generated grid container id data
       # attribute which stabilizes tests and makes it easier to target with
       # custom css
@@ -63,13 +68,6 @@ grid_page <- function(layout,
 
   container <- do.call(grid_container, container_args)
 
-  if (get_info(as_gridlayout(layout), "container_height") != "viewport") {
-    warning(
-      "Container height for layout is not set at default of viewport.",
-      "This is likely a mistake for grid_page()"
-    )
-  }
-
   shiny::fluidPage(
     theme = theme,
     htmltools::tags$div(

R/new_gridlayout.R

@@ -118,10 +118,10 @@
 #'  grid. Like `row_sizes` and `col_sizes`, this will win-out over a gap size
 #'  provided in the main layout table.
 #' @param container_height Valid css unit determining how tall the containing
-#'  element should be for this layout. Defaults to `"viewport"` (full page
-#'  height: equivalent to the CSS value of `100vh`) if any relative units (e.g.
-#'  `fr` or `auto`) are included in row sizes and `auto` otherwise. Values such
-#'  as `"auto"` will let the page grow to as large as it needs to be to fit all
+#'  element should be for this layout. Defaults to `100%`. Special value of
+#'  `"viewport"` for full-page height maps to the CSS value of `100vh` if any
+#'  relative units (e.g. `fr` or `auto`) are included in row sizes and `auto`
+#'   otherwise. Values such as `"auto"` will let the page grow to as large as it needs to be to fit all
 #'  content. This should most likely be avoided when using row heights in
 #'  relative units.
 #' @param alternate_layouts A list of layouts to be used for different viewport
@@ -303,7 +303,7 @@ new_gridlayout_template <- function(
   if (is.null(container_height)) {
     any_relative_row_sizes <- any(str_detect(row_sizes, "fr"))
     no_specified_sizes <- all(row_sizes == DEFAULT_SIZE_CHAR)
-    container_height <- if (any_relative_row_sizes | no_specified_sizes) "viewport" else "auto";
+    container_height <- if (any_relative_row_sizes | no_specified_sizes) "100%" else "auto";
   }
 
 

tests/testthat/_snaps/grid_page.md

@@ -9,23 +9,26 @@
       <div class="container-fluid">
         <div id="gridlayout-grid-page">
           <div id="gridlayout-grid-page-container" class="grid-container" data-gridlayout-key="gridlayout-grid-page-container">
-            <div class="card bslib-card html-fill-item html-fill-container" data-gridlayout-area="header" data-require-bs-caller="card()" data-require-bs-version="5" style="grid-area:header;">
-              <div class="card-body" style="flex:0 0 auto;">
+            <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-gridlayout-area="header" data-require-bs-caller="card()" data-require-bs-version="5" style="grid-area:header;">
+              <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">
                 <h2 id="header">This is my header content</h2>
               </div>
+              <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
             </div>
-            <div class="card bslib-card html-fill-item html-fill-container" data-gridlayout-area="footer" data-require-bs-caller="card()" data-require-bs-version="5" style="grid-area:footer;">
-              <div class="card-body" style="flex:0 0 auto;">
+            <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-gridlayout-area="footer" data-require-bs-caller="card()" data-require-bs-version="5" style="grid-area:footer;">
+              <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">
                 <div class="form-group shiny-input-container">
                   <label class="control-label" id="bins-label" for="bins">Number of bins:</label>
                   <input class="js-range-slider" id="bins" data-skin="shiny" data-min="1" data-max="50" data-from="30" data-step="1" data-grid="true" data-grid-num="9.8" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
                 </div>
               </div>
+              <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
             </div>
-            <div class="card bslib-card html-fill-item html-fill-container" data-gridlayout-area="plot" data-require-bs-caller="card()" data-require-bs-version="5" style="grid-area:plot;">
-              <div class="card-body" style="flex:0 0 auto;">
+            <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-gridlayout-area="plot" data-require-bs-caller="card()" data-require-bs-version="5" style="grid-area:plot;">
+              <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">
                 <div class="shiny-plot-output html-fill-item" id="myPlot" style="width:100%;height:400px;"></div>
               </div>
+              <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
             </div>
           </div>
         </div>