clerk 2023-10-26 | Slack Archive

peterh19:10:01

When I have a clerk/row where items in the row have a min. width that exceeds the row/column width, the row gets a horizontal scrollbar due to overflow. So far this is fine (although sometimes I would like the row to wrap into multiple lines, but that may need a different viewer). But when I nest that row inside a clerk/col, the first few items in the row will be cut off since the row (as a flex item inside the col) will get justify-content: center applied to it. Here is a mockup:

(def box
  (clerk/html
   [:svg {:width "100px" :height "100px" :xmlns ""}
    [:rect {:x "0" :y "0" :width "100%" :height "100%" :fill "black"}]
    [:line {:x1 "0" :y1 "0" :x2 "100%" :y2 "100%" :stroke "red"}]
    [:line {:x1 "100%" :y1 "0" :x2 "0" :y2 "100%" :stroke "red"}]]))

;; Works fine:
(clerk/row (repeat 8 box))

;; Breaks:
(clerk/col
 (clerk/row (repeat 8 box))
 "Box row in a column")

Setting CSS properties in :nextjournal/render-opts will only affect the whole column viewer, not the flex items inside of it, so I cannot overwrite the centering from there - I guess? Is there another option? My use-case here was to create a row of SVG visualizations (that need to have a fixed width) with a single caption below it, hence the column. I know that I can always use clerk/html, but I wanted to see if I encountered an issue that others may also run into.

peterh20:10:08

I think I fixed it by setting the overflow property on the row CSS to auto. This made the bottom scrollbar disappear and restores it on the actual row where it belongs. I still have to find out why this works though or if it would work in general, before making a PR or something.

(clerk/col
 (apply clerk/row
        {:nextjournal/render-opts {:overflow "auto"}}
        (repeat 8 box))
 "Box row in a column")

2023-10-26

Channels