[proto] flexible scroll container

day8 · Sep 10, 2024 · 3caee2b · 3caee2b
1 parent 15c3560
commit 3caee2b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/re_com/nested_grid.cljs b/src/re_com/nested_grid.cljs
@@ -1012,7 +1012,7 @@
                                           native-scrollbar-width
                                           showing-row-heights)]
         [:div
-         (themed ::wrapper {})
+         (themed ::wrapper {:style {:flex "1 1 0px"}})
          [:div {:on-mouse-enter #(reset! hover? true)
                 :on-mouse-leave #(reset! hover? false)
                 :style
@@ -1030,9 +1030,8 @@
                                                                                "px"
                                                                                ""))))))])
                  :grid-template-rows    (grid-template (into (if show-export-button? ["25px"] ["0px"])
-                                                             [showing-column-widths
-                                                              (px (apply + max-column-heights))
-                                                              (px (+ native-height 4))]))}}
+                                                             [(px (apply + max-column-heights))
+                                                              "minmax(0px, 100%)" #_(px (+ native-height 4))]))}}
           [:div]
           control-panel
           (into [:div (themed ::header-spacer-grid-container

diff --git a/src/re_demo/core.cljs b/src/re_demo/core.cljs
@@ -261,9 +261,38 @@
                                            :padding "0px 0px 0px 50px"
                                            :child   [(:panel (item-for-id @selected-tab-id tabs-definition))]]]]]])))    ;; the tab panel to show, for the selected tab
 
+(defn test-grid []
+  [:div {:style {:display :grid
+                         :height "100%"
+                         :flex 1
+                         :grid-template-rows "20px 1fr"}}
+           [:div {:style {:background "orange"}}]
+   [:div {:style {:background "pink" :height "100%" :overflow :auto }}
+            [:div {:style {:width "30px"
+                           :background "lightblue"
+                           :overflow-y :hidden}}
+             (interleave (repeat 100 "hi") (repeat 50 [:br]))]]])
+
+(defn test-main []
+  [rc/v-box
+   :width "800px"
+   :height "100%"
+   :children
+   (into [[test-grid]]
+         (mapv
+          #(do [rc/box :style {:background %} :size "1" :min-height "100px"
+                :child
+                [:div {:style {:min-height 100 :width 50 :background "white"}}
+                 "XYZ" [:br]
+                 "XYZ" [:br]
+                 "XYZ" [:br]
+                 "XYZ" [:br]
+                 "XYZ"]])
+          ["red" "green" #_"blue"]))])
+
 (defn ^:dev/after-load mount-root
   []
-  (rdom/render [main] (get-element-by-id "app")))
+  (rdom/render [test-main] (get-element-by-id "app")))
 
 (defn ^:export mount-demo
   []