SOLVED: Pseudo class nth-child(2n) won't display properly in editor, renders correctly on front-end

I just posted the same problem today in Discord, as as tried to select first child :smiley: . For me, it was like this:
slika

So I selected the 11th child, just so I can design it in the browser, but then changed to :first-child, so that it renders correctly on the frontend.

From what I know, to style odd or even elements of the same type, the selectors to use are: nth-of-type(odd) and nth-of-type(even) etc.

Just tested one of these pseudo-selectors in Bricks editor and I see that the background-color is being applied to all the sections.

It works correctly on the front end.

From the replies above, I see that they are already aware of this issue and it should hopefully be fixed in an update.

Neither nth-of-type nor nth-child is working correctly in the builder. It works in the front end only.

1 Like

+1 this fix is fery needed :wink:

1 Like

From another thread it looks like this is being worked on currently, the elements inside that cause the issue with the nth-child should be being moved out.

Yes, that’s the problem. The ul.actions which show the edit button, padding, width etc. in every element and temporary style tags cause problems in the case of nth-child or partly also nth-of-type, because they are part of the DOM and the “calculation” doesn’t work anymore.

I can confirm this is a bug in 1.4.0.

I’m using a first-of-type pseudo class on the repeating element (query loop), and while it does render fine on the front-end, it’s buggy on the backend. If the pseudo class is not selected in the builder, displays correctly, but once I select it (pick from the existing applied pseudo classes), it applies the styling to all other repeating elements as well. I guess it’s more like an undesired side effect, than a real bug.

Thanks for developing Bricks! It’s becoming a geat builder!

It will be fixed soon. WIP: Having position relative on all Bricks elements and containers adds limitation - Feature Requests / Improvements - Bricks Community Forum (bricksbuilder.io)

2 Likes

Hi StripedGoat,
Welcome to the forum and thanks a lot for your input!

As omega already mentioned, it will be fixed in the next version :slight_smile:

Best regards,
timmse

3 Likes

Thanks for the welcome message! I’m already so flattered by the whole forum and the conversations I see here. It’s something that reminds me of the good old days of phpBB communities :sweat_smile:

Looking forward to work with Bricks and do my part on helping it become the best page builder ever! :raised_hands:t3:

1 Like

Hey Dustin,
The issue has been fixed in Bricks 1.5beta.
Please let us know if you still encounter any problems.

Best regards,
timmse

Just tested but it doesn’t seem to be resolved for me on the 1.5 beta…

As soon as I selected the pseudo class it immediately changed all sections to the background colour set (in the editor at least).

That may be, but:

Ah very interesting! Glad it seems improved, that’s not my experience though unfortunately. :frowning:

I’m wondering… maybe it’s fixed just for new pseudo classes but not existing ones? Here’s a quick video of what it looks like for me with the existing pseudo class. Everything is good until I open a style menu item then it applies it to every instance even if I didn’t change anything. Not sure why it’d trigger like that just by simply opening a style item without actually making any changes to it, but I think that shows there’s still a bug here.

When I get a bit more time I’ll see if I can narrow down if the issue applies only to existing pseudo classes but maybe fine for new ones only, may help narrowing down a root cause.

Hey Dustin, you can provide me with the template JSON file?

It isn’t a template, it’s a page. I’m not certain how to get the JSON, are there steps for that and does it apply still if it’s a page? I’ll get it for you if I can figure it out, haha

Hey,
While editing the page:

  1. Click on the little template folder icon in the upper right
  2. Click on “Save as template”
  3. Enter a name, select “Section” as Template Type
  4. Click Save
  5. Export it (either within the template popup, or in Bricks > Templates)

Best regards,
timmse

Ah thank you, I just tried that now, emailed the JSON to you a moment ago (wasn’t sure if it was secure to post here or not). Thanks for looking into this. :slight_smile:

1 Like

Just came across this bug in 1.4.0.2. It’s not loading for me even on the frontend. The css isnot even applying to the element.

I hope this is really fixed in 1.5. :slight_smile:

1 Like

Me too. Hopefully we’ll find out in the next release candidate for 1.5. I know @timmse had told me he couldn’t reproduce it but was using the latest code which was newer than the 1.5 beta, so it’s possible it’s fixed in newer updates to the beta, and hopefully we can confirm in the 1.5 RC coming out later this week. :slight_smile:

1 Like