Fix chrome grid-flex nesting issue

Change-Id: I92a38c6f5fbf23c7f32c233c47b5c1230a1933d7
Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>

diff --git a/dashboard/src/templates/dashboard/genericselect.html b/dashboard/src/templates/dashboard/genericselect.html
index a03f759..1e9a29a 100644 (file)
--- a/dashboard/src/templates/dashboard/genericselect.html
+++ b/dashboard/src/templates/dashboard/genericselect.html
@@ -14,9 +14,10 @@
     #{{select_type}}_form_div div {
     }
 
-    #{{select_type}}_form_div > *:not(.divider) {
+    #{{select_type}}_form_div > * {
         margin-left: 10px;
         margin-right: 10px;
+        margin-bottom: 20px;
     }
 
     #{{select_type}}_form_div div * {
@@ -25,17 +26,14 @@
     #{{select_type}}_form_div {
         flex: 1;
         margin: 30px;
-        display: grid;
-        grid-template-rows: auto 1px auto 1fr;
-        grid-template-columns: repeat(24, 1fr);
-        grid-row-gap: 15px;
+        display: flex;
+        flex-direction: column;
     }
 
     #select_section {
+        flex: 1;
         display: flex;
         flex-direction: column;
-        grid-column-start: 3;
-        grid-column-end: 21;
     }
 
     #{{select_type}}_select_form {
@@ -49,12 +47,9 @@
     }
 
     #create_section {
-        grid-column-start: 1;
-        grid-column-end: 24;
     }
 
     #select_header_section {
-        grid-column: 1 / 24;
     }
 
     h3 {
@@ -65,8 +60,6 @@
 
     .divider {
         border-top: 1px solid #ccc;
-        grid-column-start: 1;
-        grid-column-end: 24;
     }
 
 

diff --git a/dashboard/src/templates/dashboard/searchable_select_multiple.html b/dashboard/src/templates/dashboard/searchable_select_multiple.html
index 4290147..5fa8993 100644 (file)
--- a/dashboard/src/templates/dashboard/searchable_select_multiple.html
+++ b/dashboard/src/templates/dashboard/searchable_select_multiple.html
@@ -34,6 +34,7 @@
             flex: 1;
             position: relative;
             overflow-y: auto;
+            padding-bottom: 10px;
         }
         .autocomplete {
             display: flex;
@@ -59,7 +60,6 @@
 
             position: absolute;
             width: 100%;
-            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 
         }