WAIT: Styling inside query loop not present on front end

Bricks Version: 1.4.0.2

I’ve seen this bug for a while now, and keep waiting to see someone else posts it or if it gets fixed otherwise, because it’s pretty obvious and totally annoying.

Basically, if I apply some styles to an ID of an element that is inside a query loop, the styles appear fine in the builder but are not rendered in the front end.

Example:

I’ve applied padding of 2rem and a row-gap of 2px to a DIV inside my query loop. It looks fine in the builder (other than the fact that it only shows the first loop item but not with any real data…but thayt is another issue).

On the front end, the styling for the same element is not there.

I will workaround this by using a class instead which I’ve always done, but it would be nice to get this fixed.

Hi,
It makes totally sense to me.

HTML id is not meant to style multiple elements at once. It is meant to target a specific element and must be unique on a page.

In CSS, we use classes to style multiple elements, so why not use classes in query loop?

That said, I agree it could be confusing for beginners or people not knowing HTML/CSS.
An idea could be to automatically generate classes for query loop subitems and transfer id styling to classes?

2 Likes

Hi Eric,
Thank you very much for your report!

Unfortunately, I am not able to reproduce the issue. The only known issue is, when using a custom ID on the query element or inside the loop the styles are applied to the default selector:

But as far as I can see from your screenshots, you’re using the default ID selector, which changes to a class anyways :thinking:

Best regards,
timmse

2 Likes

Wow, I can confirm id is automatically turned into class for loop container and sub-items and style is well applied to all elements using ids :slight_smile:

Awesome implementation!

3 Likes