Add indentation support for components

[damithc]

When using MarkBind, I find myself needing to indent panels/boxes to match the surrounding contents.

Normally I do that by wrapping a <div> around the component but it does add noise to the code somewhat. I'm wondering if we can provide a attribute such as indent="20" to indicate the indentation level for the whole component.

I'm not sure if the same can be achieved using the current add-class mechanism; it cannot be used to indent the whole component, right?

ADD: Another place where this feature can be useful is <include>

[acjh]

Yes, the same can be achieved using add-class for <box> and <panel> etc.

Since <include> does not wrap the contents, it cannot. Instead, do it in the included file.

[damithc]

My code:

<box>

Some text
</box>

<div class="indented-level2">
<box>

Some text
</box>
</div>

<box add-class="indented-level2">

Some text
</box>

.indented-level2 {
    padding-left: 40px;
}

Output:

What I want to achieve is the middle one. add-class applies the indentation to the box content, not the box itself. Should I use a different css code?

[acjh]

Yes, use margin-left CSS property instead of padding-left .

From https://developer.mozilla.org/en-US/docs/Web/CSS/padding:

Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.

[damithc]

Yes, use margin-left CSS property instead of padding-left .

Nice 👍
In fact, we can use bootstrap built-in util classes instead of writing our own (e.g., box add-clas="ml-2">, as long as the indentation we want is not too deep.

Let's leave this issue open until we document this as a tip/trick somewhere in the user guide.

[damithc]

Yes, use margin-left CSS property instead of padding-left .

Works for boxes but not for panels 🤔 perhaps panels override the margin properties?

[acjh]

You need to add d-block class too, as panel's card-container is an inline <span>.

[damithc]

You need to add d-block class too, as panel's card-container is an inline <span>.

Got it. Thx 👍