Customization Spartacus Category Page breaking Bootstrap Framework cols and rows ideology

0
votes

I'm trying to customize storefront (especially, Category Page) and faced with following issue: Plain html structure which is based on Bootstrap Framework looks like:

<div class="row">
   <div class="col-lg-3">facets here</div>
   <div class="col-lg-9">list of products here</div>
</div>

I created custom ProductListComponent & ProductListItemComponent components (in Spartacus side). Currently structure in Browser Inspector looks like:

<cx-page-layout class="ProductListPageTemplate">
  <div class="row">
    <cx-page-slot class="ProductLeftRefinements">
      <product-facet-navigation>
          <div class="col-lg-3">facets here</div>
      </product-facet-navigation>
    </cx-page-slot>
    <cx-page-slot class="ProductListSlot">
      <product-list>
          <div class="col-lg-9">list of products here</div>
      </product-list>
    </cx-page-slot>
  </div>
</cx-page-layout>

The main issue is that having wrapper tags like <cx-page-slot>, it breaks displaying blocks How can I solve it in Spartacus? I try to say that, e.g. in our case div's with col-lg-* should be placed near each other to prevent breaking Bootstrap Framework logic

1
spartacus-storefront

1 Answers

0
votes

CSS has a display: contents rule that you can use to ensure that certain elements are ignored by the CSS layer, so that you wouldn't break the CSS flow.

You could apply:

cx-page-slot {
  display: contents;
}

I've not tested this with Spartacus, but I believe this works. Can you double check and feedback to us?