In SXA 1.7, is it possible to add style on "li" tag from rendering variant? as i think the li tag is added in javascript "component-search-results?"

  • I believe you would add a style to the rendering variant instead. – Michael West May 26 '18 at 10:36
  • Is there a way to know the index of item in rendering variant and based on that i can handle the styling? – NAli May 26 '18 at 12:11
  • This is where the :nth-child() and the :nth-last-child() pseudo-classes come into play. – Dawid Rutkowski May 26 '18 at 15:41
  • But the design needed is more complex, we need a view like grid where each cell well display the opposite of the other for example the first cell will show image to the left and description to the right then the second cell will display description to the left and image to the right.is there a way to achieve this using rendering variant with search results? – NAli May 26 '18 at 16:00
  • 1
    I would think css solves this, like @DawidRutkowski points out. stackoverflow.com/a/11781677/1277533 – Michael West May 26 '18 at 16:22

Whatever the complexity is, SXA can handle it will. Follow these steps:

  1. Create your markup and write styles for it. (a fully complete HTML)
  2. Create a rendering variant for search result.
  3. Customise your rendering variant based on your containers and markup.
  4. The listing should be based on "ul" and "li" and your item styles should be independent of "ul" and "li"

That's it.

The list already has classes on items for start and end etc. You can style based on it. If not you can use the pseudo selectors of css for it.

Check the link for nth child and pseudo selectors reference on w3schools which is very basic.


P.s if you are good at using css flex you can also take benefits from it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.