The parent of grid column(s) needs display:flex to be displayed properly in BS4

Author: cpsievert

R/layers.R

@@ -80,7 +80,7 @@ bs3compat_layer <- function() {
       "bs3compat", packageVersion("bootstraplib"),
       package = "bootstraplib",
       src = "bs3compat/js",
-      script = c("tabs.js", "bs3compat.js")
+      script = c("tabs.js", "bs3compat.js", "no_row_container.js")
     )
   )
 }

inst/bs3compat/_no_row_container.scss

@@ -0,0 +1,7 @@
+.no-row-container-bs3compat {
+  display: flex;
+}
+
+.tab-content > .active.no-row-container-bs3compat {
+  display: flex;
+}

inst/bs3compat/_rules.scss

@@ -6,5 +6,7 @@
 
 @import "glyphicons";
 
+@import "no_row_container";
+
 @import "shiny_input";
 @import "shiny_misc";

inst/bs3compat/js/no_row_container.js

@@ -0,0 +1,9 @@
+// BS4 cols need their parent container to be a flex container
+// in order to render properly
+$(function() {
+  let el = $("[class*='col-sm-']").parent();
+  if (el.length === 0) return;
+  if (!el.hasClass("row")) {
+    el.addClass("row").addClass("no-row-container-bs3compat");
+  }
+});