The parent of grid column(s) needs display:flex to be displayed prope…

…rly in BS4
rstudio · Jan 21, 2020 · 8f0bbe6 · 8f0bbe6
1 parent 39ff000
commit 8f0bbe6
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/R/layers.R b/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")
     )
   )
 }

diff --git a/inst/bs3compat/_no_row_container.scss b/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;
+}
diff --git a/inst/bs3compat/_rules.scss b/inst/bs3compat/_rules.scss
@@ -6,5 +6,7 @@
 
 @import "glyphicons";
 
+@import "no_row_container";
+
 @import "shiny_input";
 @import "shiny_misc";
diff --git a/inst/bs3compat/js/no_row_container.js b/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("no-row-container-bs3compat");
+  }
+});