search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
314 stars 29 forks source link

:nth-child() doesn't work in state dropdown #572

Open wplit opened 5 years ago

wplit commented 5 years ago

Describe the bug When I apply :nth-child(odd) or similar, say on a repeater element, to allow alternating styles, it isn't correctly applied. It shows up correctly in the builder, but not on the front, and not after saving and returning to the builder.

Use Case Alternating left/right posts. Or grids where the background colour needs to alternate for better readability.

The problem is that the state menu removes the brackets that are needed for this type of pseudo class.

Screen Shot 2019-09-23 at 9 13 15 am

Expected behaviour I should be able to use the state menu to add a custom state such as :nth-child(2n) on an element. Especially now the repeater component is here. (Have always used CSS previously, when using easy posts etc)

What actually happens It is added in the stylesheet as :nth-childodd with the brackets removed and therefore is incorrect and doesn't get applied by the browser.

I know I had mentioned similar in feature requests about being able to target child elements, but I hadn't realised that it also has these limitations.

I have made this a bug report instead as in your documentation about the states dropdown, it says that state menu can be used for lots of pseudo classes and links to a page which includes nth-child() and other pseudo classes, some of which also have round brackets and therefore would also have the same problem.

skakkistudio commented 5 years ago

I noticed the same with a compound state of :hover:after. The second colon between hover and after is removed

KittenCodes commented 4 years ago

This is fixed in Oxygen 3.1 when using the element ID: https://d.pr/i/nf12v3.

alexanderkladov commented 4 years ago

@KittenCodes I didn't want to create a new thread for this, but the 3.1 update didn't fix all of the issues with pseudo-classes just like @skakkistudio mentioned. If you were to stack pseudo-classes (i.e. :hover:before, :hover:after, :hover:focus:active etc), then we get the same issue as described in the original bug report.

Describe the bug When you apply stacked pseudo-class like :hover:before or similar, it shows up correctly in the builder at first (as long as you don't reload it), but never on the front-end. After re-loading the Oxygen Builder, the :hover:before is turned into :hoverbefore (which is obviously not valid) and no longer works in either Oxygen Builder or on the front-end.

KittenCodes commented 4 years ago

@alexanderkladov

I've set up a page here: https://oxygen-qddahqj53wp7k.oxygen-demo.qsandbox.me/pseudo-classes/. If you hover over the text, you will see that the :hover:before and :hover:after classes are applied.

After reloading the builder, the classes remain: https://d.pr/i/xGFq9j.

If you're experiencing different behaviour, please set up an example on our Sandbox site and send us the URL. You can create a Sandbox site here: https://oxygenbuilder.com/try/.

alexanderkladov commented 4 years ago

@KittenCodes At first I thought that you were right and that it is working now for some reason, even though I found this bug on a Sandbox environment too. But after digging around a bit longer just now, I found out that it is in fact still broken.

The reason your demo works is because you applied the stacked pseudo-classes to an ID, which seems to work just fine. However, the pseudo-classes will still break, if applied to a Class.

Here is a demo: https://oxygen-qp2pw52g6xp7k.oxygen-demo.qsandbox.me/multi-pseudo-classes-test/

KittenCodes commented 4 years ago

Thanks @alexanderkladov. I've reported this internally.

wplit commented 4 years ago

I see it's fixed for elements using their IDs. There are two things that would make this more useful;

  1. Be able to do with classes also.
  2. Have option to put element into hover state. (like we can with chrome inspect tool) so then as we're applying things like :hover > .child-element, we can actually see the changes so are able to style visually.
alexanderkladov commented 4 years ago

@wplit regarding your point 2 you mean you want to be able to target a .child on .parent:hover (e.g. .parent:hover .child {} type selector) ? That would definitely be useful. Right now we have to do it in a stylesheet manually.

Also, @KittenCodes, not sure if it's important or not, but I see you haven't tagged this as a confirmed bug.

KittenCodes commented 4 years ago

@alexanderkladov

Also, KittenCodes, not sure if it's important or not, but I see you haven't tagged this as a confirmed bug.

My bad - I've tagged it.

wplit commented 4 years ago

..you mean you want to be able to target a .child on .parent:hover (e.g. .parent:hover .child {} type selector) ?..

Yes, sorry I worded it badly, but I've actually already put a request in for this already https://github.com/soflyy/oxygen-bugs-and-features/issues/214

alexanderkladov commented 4 years ago

@wplit nice! I chimed in with my own suggestion regarding how that could be implemented pretty easily.

yankiara commented 4 years ago

Any update on this? :last-child or :nth-last-child(2) still don't work, even on repeater's ID.

By the way, I see that even without using pagination, the pagination div is still here, inside the repeater's list, so it is actually the last child! Might be related..... And to me this is really bad design: pagination div SHOULD NOT be in the repeater's item list.

philthebass commented 2 years ago

I'm struggling with a similar challenge. I'm trying to create a similar hover effect as used here - http://unionagency.one/ivy/index1.html using content:nth-child(2) and content:nth-child(1) to apply the two scaling effects on the model images. I can get one to behave but not the other. Would this need to be coded manually? Thanks