Search code examples
cssscrolloverflowclojurescriptre-frame

How to edit the inline-style of a re-frame component to add a scroll to an overflow-x property?

I have been using Clojure, ClojureScript, lein, shadow-cljs, Emacs, and CIDER to work on a Clojure/ClojureScript dynamic web app project.

Usually, I build the project executing the command cider-jack-in-cljs in Emacs, then I choose shadow-cljs, also shadow for REPL type, and, finally, app for the build option. I can watch changes on the UI on localhost:3005.

Using Brave browser and the Dev Tools, I managed to do the following addition:

enter image description here

As you see, it is a scroll (in blue), added via element style tweak (in red), affecting the selected div (in green).

Ok. Now, I want to make this change perpetual. I found the re-frame component on the source code:

[:div.card-body.text-left.shadow.p-3.mb-5.bg-white.rounded
           
    [rc/v-box
            :gap       "10px"
            :children
    
      (omitted...)

 
                        :children [[delete-je-button-rc the-entry]]]]]]

I decided to do the following addition:

          [:div.card-body.text-left.shadow.p-3.mb-5.bg-white.rounded

           :style {:overflow-x  "scroll"}

           [rc/v-box
            :gap       "10px"
            :children

             (omitted...)
 
                        :children [[delete-je-button-rc the-entry]]]]]]

That did not workout.

Following @ThomasHeller's suggestion, I also tried:

[:div.card-body.text-left.shadow.p-3.mb-5.bg-white.rounded
          ;[smart-je-header (:name the-entry) (:id the-entry)] ;deprecated for inline-editor-je-name
           {:style {:overflow-x  "scroll"}}

Also:

[:div.card-body.text-left.shadow.p-3.mb-5.bg-white.rounded.overflow-x-scroll
          ;[smart-je-header (:name the-entry) (:id the-entry)] ;deprecated for inline-editor-je-name

And even both of them:

          [:div.card-body.text-left.shadow.p-3.mb-5.bg-white.rounded.overflow-x-scroll
          ;[smart-je-header (:name the-entry) (:id the-entry)] ;deprecated for inline-editor-je-name
           {:style {:overflow-x  "scroll"}}

Unfortunately, nothing worked out.

There is something in the source code causing an overwrite, see the pic above:

enter image description here

I am clueless about how to debug this and find the root.

Solution

  • A regular :div element only supports the usual attribute map, so you set it via:

    [:div.card-body.text-left.shadow.p-3.mb-5.bg-white.rounded
 {:style {:overflow-x  "scroll"}} ...]

    This appears to be using tailwindcss, so you can also set this via its overflow classes instead and drop the :style map completely.

    [:div.card-body.text-left.shadow.p-3.mb-5.bg-white.rounded.overflow-x-scroll
 ...]