Iterate through Macro component [closed]

asked 2021-07-01 04:38:47 +0800

MartVq gravatar image MartVq
33 2

updated 2021-07-01 04:43:43 +0800

Looking for some advice as it would seem i tried every potential option. I have a custom macro component, that handles display of an image in the gallery - image and two buttons which all load fine. The problem is that it seems everything that is inside the macro goes nuts with their styling, ruining bootstrap grid setup. Maybe someone encountered similar issue? Is there anything else i should do to make it load correctly?

I tried to use <foreach> with the column div (and all its contents) inside the macro. Then tried to switch to children binding on a row with a <template>. Only difference from normal template based loading without a component is additional div inserted between row and column.. removing it (through browser) view goes back to normal

delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by MartVq
close date 2021-07-08 00:32:33

1 Answer

Sort by » oldest newest most voted

answered 2021-07-01 10:36:40 +0800

cor3000 gravatar image cor3000
6005 2 7
ZK Team

I think the problem is not with the way you iterate over the components, but rather an implementation detail of <macro>. By default a macro creates a <div class="z-macro">...</div> surrounding its children. This could be the element causing the trouble on your side.

However without a runnable case (using the same bootstrap style) I can't give a concrete advice.

Depending on how you use the macros you might get away with inline macros (which remove the surrounding div - with a different trade-off)

If it's just CSS messing up, there is a chance that adding display: contents to the macro avoids CSS-box-model effects.

<forEach items="@init(vm.myimages)">
  <mymacro style="display: contents;">

If this doesn't help please provide a runnable example on zkfiddle.org (I'll increase your Karma so you can post a link)

link publish delete flag offensive edit

Question tools

1 follower



Asked: 2021-07-01 04:38:47 +0800

Seen: 5 times

Last updated: Jul 01

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More