re-frame 2022-03-29 | Slack Archive

According to this code in re-com's modal panel component:

[:div    ;; Child container
      (merge
        {:class (str  "rc-modal-panel-child-container " (get-in parts [:child-container :class]))
         :style (merge {:margin  "auto"
                        :z-index 2}
                       (get-in parts [:child-container :style])
                       (when wrap-nicely? {:background-color "white"
                                           :padding          "16px"
                                           :border-radius    "6px"}))}
        (get-in parts [:child-container :attr]))
      child]]

I should be able to use a padding value in my local css to override the default padding value using the following css declaration:

div.rc-modal-panel-child-container {
  padding: "50px";
}

However, when I try to do this, Chrome's tools tells me that the padding attribute is an "invalid property value". Any ideas why it thinks that padding is invalid and how to fix it?

p-himik14:03:55

In CSS it should be specified without double quotes.

fadrian14:03:23

Thanks for that. That fixed the issue of CSS not recognizing the attribute's validity, but not the issue I had in the display. The whole point was to widen out the dialog because I occasionally have wide components in it (like multi-select). The default padding of 16px when wrap-nicely? is true is either too small, or the size of the background is too small and the widgets hang over the right side of the dialog. I finally fixed that by declaring "wrap-nicely?" false in my dialog code, and adding the background-color and border-radius attributes to my local css. This prevented the wrap-nicely map from overriding my local defaults.

2022-03-29

Channels