how to style a vanx list?

[HEAVYPOLY]

Hi, I want to style the parent of a vanX list

The parent background is orange, but for some reason list items are having row direction instead of column, am I doing something wrong?

 return div({ style: 'width:100%;gap:5rem;flex-direction:column;background:orange' },
   vanX.list(div, items, ({ val: v }) =>
     div({ class: 'pricingCardInner' },
       h2({ style: 'max-height:3rem;' }, v.label),
       h1({ style: 'max-height:3rem;' }, '$' + v.price),
       div({ style: 'font-size:1.5rem;max-height:1em;' }, v.description),
       ul(v.includes.map(i => li(i))),
       button({ style: "margin-top:'auto'", onclick: checkoutLemonsqueezy }, 'BUY' + v.label.slice(3).toUpperCase()),
     )
   )
 )

[Tao-VanJS]

Hi @HEAVYPOLY,

Thanks for reaching out! Do you have a link to the full code where the problem occurs?

[HEAVYPOLY]

here is a minimal version of what I am trying to do, and the result I am seeing:

  return div({ class: 'pricingCards' },
    vanX.list(div, items, ({ val: v }) =>
      div({ class: 'pricingCard' },
      ),
    ),
  )

.pricingCards {
  position:relative;
  display:flex;
  flex-direction: column;
  width:100%;
  height:100%;
  background:rgb(157, 255, 0);
  gap: 3rem;

}
.pricingCard {
  margin:1rem;
  border-radius: 1.5rem;
  background:var(--uiCol);
  display: flex;
  padding:8rem;
  padding-left:6rem;
  padding-right:6rem;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
  width:80rem;
  height:50rem;
}

[HEAVYPOLY]

  return div(
    vanX.list(() => div({ class: 'pricingCards' }), items, ({ val: v }) =>
      div({ class: 'pricingCard' },
      ),
    ),
  )

Was able to figure it out through some digging in api reference. I think it would be nice to have a demo of this situation in the vanX.list examples

[Tao-VanJS]

Glad it works for you now:-) I will consider adding some example about this usage in the tutorial.