Help: How to create a simple ordered list inside a bricks query loop

Hi guys. I’ve really googled and youtubed this and can’t find in Bricks forums either but how can I create (and show the numbers) on the query loop. I’ve got my loop outputting the ‘ol’ list on the query block and my looped items output as ‘li’ items but I can’t see anything in the code/css (or in Bricks) that’s preventing the numers actually appearing in the browser… output code here…

image

So is there a setting somewhere or additional css overrides needed or what?

Many thanks - in advance. :smile:

Q.

Ah… I can partially my own query now, but adding a simple %root% {display: list-item;} custom css statement to the OL loop item… but is that the only/best way to do it?

image

your solution will display the numbers as ::marker-pseudo-elements. those can’t be styled in great detail. If you need more styling-options you can use this (CSS Counters):

Many thanks SautB. Much appreciated. I have used and re-tested css counters before but couldn’t get them to work with the bricks loop outputs IE The OL container loop and the LI (looped items)* but I was surprised that Bricks doesn’t have a simple mechanism for show/hiding the actual numbers when OL are specified in the UI (as above) - unless there is some other way of turning those on/off elsewhere… but back to you css counters @suatB if you have tried and tested that with Bricks loops (as above)?..

*applying to css counters to the bricks query loop (as above) results in the LI counter resetting to ‘1’ for every item in the outputted list and so as in the simple example each of those three li.brxe-ojckmm items were showing the result as ‘1’ for reasons that I haven’t found (or properly delved into), only becuase I was hoping Bricks had a simpler way of toggling the OL numbers on/off - but again @SuatB many thanks for replying to this.

One of the reasons why it doesn’t show by default, is because you are using a Block-Element instead of a Div-Element. The Block Element has a display:flex which overrides the display:list-item, which is responsible for the ::marker Pseudo element.

As to the counter part, try this on your ol:

%root% {
  counter-reset: list;
}
%root% li::before {
  counter-increment: list;
  content: "Counter " counter(list) ": ";
}