Bug? New Counter element rendering

Beta
#1

Hey Team

Per below, when I force the width of a new Counter element, the second Counter doesn’t sit next to the first one (like buttons do), they automatically jump under:

I think this is a bug? Should act like a button?

Interestingly, when I opt to set the Column to Flex > Row I can get where I need to, however I have to set the Text element to 100% width to ensure the Counter doesnt creep up to sit to the right of the Text (often 100% text width is not preferred).

When text isn’t 100%:

Cheers,
Sam

#2

Howdy, @grannysam11!

Thanks for writing in! The Counter Element shares some old styling with the v1 version and was originally intended to be used in a multi-column layout where they would center and take up their own line for easy layouts. As they are display: block by default, they will alway sit on top of one another using standard document flow.

That being said, you can certainly achieve all sorts of interesting layouts using the Flexbox settings on the Column as you have mentioned here. For situations where you need to set a max-width on some text and the Counter Elements are popping up onto that line of content, I would recommend inserting either a Gap or Line Element with a height of 0px but a width of 100%, which will ensure that the Gap or Line always acts as a divider between the content above and below.

Hopefully this helps to point you in the right direction, cheers!

#3

Thanks @kory

Have realised one ‘workaround’:
– Flexing the column with ‘Row’ child placement > Wrapping > Spreading Evenly Horizontally

– Have set the text as 100% width, and can then add a 10% padding so it brings the text in, but the buttons stay below it (buttons then sit unevenly under text with a padding though, so I’ll be leaving it at 100%)

Also, adding a new ‘Row’ element below the text and setting to 3 columns within that primary column and adding a counter to each column would also work I’d think.

Would be handy if the Counter acted like a Pro Button though… :sweat_smile:

Cheers
Sam

#4

Hey, @grannysam11! Yes, setting the Column to a Row alignment like this is how you can achieve something like this. You can use a Gap or Line as mentioned above to create vertical breaks in certain areas where you might need it. And now with nesting Rows, there are lots of options to achieve layouts like this. At this point we have no plans to change the Counter Element for right now.

#5

No worries @kory - enough functionality there to make it work.

Cheers,
Sam

#6

:thumbsup: Thanks Sam.