From 33897b53cd83b56b96726a573067e0f80d702bd4 Mon Sep 17 00:00:00 2001
From: Carson <cpsievert1@gmail.com>
Date: Tue, 21 Jan 2020 15:43:35 -0600
Subject: [PATCH] The parent of grid column(s) needs display:flex to be
 displayed properly in BS4

---
 R/layers.R                            | 2 +-
 inst/bs3compat/_no_row_container.scss | 7 +++++++
 inst/bs3compat/_rules.scss            | 2 ++
 inst/bs3compat/js/no_row_container.js | 9 +++++++++
 4 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 inst/bs3compat/_no_row_container.scss
 create mode 100644 inst/bs3compat/js/no_row_container.js

diff --git a/R/layers.R b/R/layers.R
index 3f9c53f1e..5f8cd7f30 100644
--- 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
new file mode 100644
index 000000000..5b1f53ae3
--- /dev/null
+++ 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
index bfac21125..a10fb59c3 100644
--- 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
new file mode 100644
index 000000000..a8c43f2cd
--- /dev/null
+++ 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("row").addClass("no-row-container-bs3compat");
+  }
+});