Margin being applied to both module and module wrapper

[ajatnb]

When adding a margin style to my custom module, the margin is also being added to the module wrapper. Why? What is happening here?

fields.json

{
 "id": "module.styles.margin",
 "label": "Margin",
 "name": "margin",
 "type": "group",
 "children": [
 {
 "id": "module.styles.margin.top",
 "label": "Top",
 "name": "top",
 "type": "number",
 "display": "text",
 "suffix": "px",
 "min": -40,
 "max": 40,
 "step": 4,
 "default": 0
 }, {
 "id": "module.styles.margin.bottom",
 "label": "Bottom",
 "name": "bottom",
 "type": "number",
 "display": "text",
 "suffix": "px",
 "min": -40,
 "max": 40,
 "step": 4,
 "default": 0
 }
 ]
}

module.html

{% require_css %}
 <style>
 {% scope_css %}
 .plain-text-module {
 margin-top: {{ module.styles.margin.top }}px;
 margin-bottom: {{ module.styles.margin.bottom }}px;
 }
 {% end_scope_css %}
 </style>
{% end_require_css %}

<div id="plain-text-module__{{ name }}" class="plain-text-module">
 {% text value="{{ module.text }}" %}
</div>

Rendered HTML

Expected CSS

*

Unexpected CSS

*

[Jaycee_Lewis]

Hey, @ajatnb Have you already ruled out something like this?

// Change from:
"id": "module.styles.margin",
"name": "margin",

// To:
"id": "module.styles.customMargin",
"name": "customMargin",

I’m not the best with styling, so some tweaking may be needed.

Best,

Jaycee

[melindagreen]

hi @ajatnb ,

in my experience, using dot notation in the field ID is representative of nesting. so this, to me, looks like you should have a field named “module,” with a child field “styles,” with a child field “margin,” with child fields “top” and “bottom.”
if your fields.json code above is the entire file, try changing all three instances of “module.styles.margin” to something like “module_styles_margin” (a single term, no parent-child relationship implied) or and see if that makes a difference in how it’s rendered.
your top and bottom fields would then have IDs module_styles_margin.top and module_styles_margin.bottom .
also, i noticed that you have a suffix of “px” on your margin fields, and then you also add “px” in your HTML file. that may or may not be related.

[ajatnb]

thank you, @Jaycee_Lewis. that does appear to work. it’s curious that i need that workaround.

thank you, too, @melindagreen, for your input. i did only include the relevant objects from my theme.json file. the nesting is set up correctly in the file itself. too, for reference, the suffix set in the json file is simply for display purposes in the content editor and has no effect on the numerical value of the field. the suffix is needed in the HTML to work properly. (reference)