Padding and margins settings (not) working for accordion component

Elements Component Development
1

I have a custom component where the margin and padding settings for the top don’t seem to work. All other options (left, right, bottom) do work. The issue occurs in every section of the custom component where margin and padding options are available.

margin_padding
margin_padding1128×772 70.1 KB

2

Hmm, hard to fix without seeing the custom component code… I’m thinking it’s a coding error, perhaps in the HTML Template…

3

It was a code error both for the margin top settings and the padding top settings. But the solution was different:

Margins work with the original structure:
“format”: “m-{{value}}”

Paddings now work with the explicit format for each direction:
“format”: {
“top”: “pt-{{value}}”,
“right”: “pr-{{value}}”,
“bottom”: “pb-{{value}}”,
“left”: “pl-{{value}}”
}

1 Like
4

This is not valid code for setting a format on a control property.

In this case, rather than using format, you need to set the correct mode on the themeSpacing controls for Margin and Padding – Elements will then correctly format the control output with the appropriate Tailwind classes.

Here’s a working example for margin and spacing controls:

{
  "title": "Margin",
  "id": "margin",
  "themeSpacing": {
    "mode": "margin",
    "default": {
      "base": {
        "top": "0",
        "right": "0",
        "bottom": "0",
        "left": "0"
      }
    }
  },
},
{
  "title": "Padding",
  "id": "padding",
  "themeSpacing": {
    "mode": "padding",
    "default": {
      "base": {
        "top": "0",
        "right": "0",
        "bottom": "0",
        "left": "0"
      }
    }
  },
}

If you’re still having trouble, please paste in your properties file so we can take a look :slight_smile:

1 Like
6

After a lot of trial and error and with the help of Claude, my AI budler, I have an accordion component working with the possibilities to style the header (text and box), the arrow and the content area :sweat_smile:

Close
Close1422×612 22.1 KB

Open
Open1422×612 117 KB

pane
pane618×1374 63.8 KB

3 Likes
7

I’m so pleased you’re able to build the components you need — this is really impressive stuff!

8

Thank you for the encouraging words, but all the credit really goes to the RW team and the way Elements is taking shape more and more.

The regular adjustments and refinements based on beta tester feedback, and especially the great communication about the development of Elements and the weekly videos, make it very appealing for users like me—who know nothing about JSON and just a little HTML—to still get started using AI tools to create something themselves.

And the fact that we’re still in the beta phase suggests that there’s a lot more great stuff to come. :smiley:

2 Likes