SOLVED: Component Slots: div in builder causing styling issues

Bugs
1

I have a Component with a slot. The block in which the slot sits has a row gap of 100px. When using the component instance with several objects in the slot, the gaps are ignored in the builder. This is because the slot has a separate div element. On the rendered frontend, it looks all fine since the slot has no separate div element and the gap settings for the parent block take effect.

Steps to reproduce:

  1. Create a Block and gibe it a row gap of 100px.
  2. Make it into a component and add a Slot into the Block
  3. Leave the component editing and add objects in the slot
  4. Notice the gap is ignored
  5. Show page on frontend: Gap is working

components-slots-issue
components-slots-issue1231×402 54.8 KB

I first noticed this issue when using global classes for the parent block. This also causes other strange issues where the arrangement of objects suddenly changes or – when using an icon element as the first item – the entire layout within the builder breaks (sometimes it only removes the icon in the builder preview; this is not fully reproducible). On the frontend, everything remains fine. See screen recording: https://drive.google.com/file/d/12kll8Hp0pNDS81fScPrTj9xdL7zkpOjO

1 Like
2

Hi @davidfrx,

Thank you for testing the beta release and sharing your findings :slight_smile: Hmm yeah seems like the temporary placeholder div we’re using to identify the slot is causing issues. I have added this to our bug tracker to see how we can get rid of the placeholder slot div in the builder.

3

We fixed this issue in Bricks 2.2 RC, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any pre-stable release, please do not use it on a production website. It is intended for testing in a local or staging environment only.

1 Like