Quiescent with devcards making cards go wonky

Question

I'm using the quiescent library as my react wrapper. I was wanting to use devcards, and I was sort of hoping it would just work, even thought there isn't really a macro for quiescent like there is for om (i don't really know much about devcards yet).

Anyway, I got it all setup with figwheel and everything, and it's sort of working, but the cards ui is a little wacky:

First, here's what i think is the relative code:

(ns punt.core
  (:require [quiescent.core :as q]
            [quiescent.dom :as d])
  (:require-macros [devcards.core :refer [defcard]]))

(def div1 (d/div {}
                (d/h1 {} "hello")
                (d/p {} "paragraph")
                (d/h2 {} "second header")
                (d/p {} "another paragraph")))

(def div2 (d/div {}
                (d/h1 {} "a better hello")
                (d/p {} "my favorite pargrauph")))

(q/defcomponent vertical-split [left right percentage]
  (d/div {}
        (d/div {:style {:float "left"
                        :width (str percentage "%")
                        :height "400px"}}
                left)
        (d/div {:style {:float "right"
                        :width (str (- 100 percentage) "%")
                        :height "400px"}}
                right)))

(defcard fifty-fifty
  "Description"
  (vertical-split div1 div2 50))

(defcard fifty-fifty
  (vertical-split div1 div2 80))

Now the content of the cards looks how I would expect, but the title bar of each card is extending a little crazy. Actually a picture is more helpful than explaining it, so here you go:

My diagnosis is that somehow devcards doesn't recognize the html that i made with quiescent, so it just doesn't put it in the card. Then it renders html for some reason, and then the next card is rendered, and i guess the title bar is programmed to extend all the way to the previous card, hence overlapping the stuff I made.

So guess my basic question is how to use quiescent with devcards.

Answer 1

答案很简单，令人震惊，它表明我缺乏html和css知识。通过使容器div使用overflow: auto，他们将扩展卡片以包含实际内容。