Quick question about the Glide University app

Hey folks, I just tried the Glide University app and have a quick question about the quiz layout.

Each question has a small number next to it. How is this implemented? Custom css? Action Row?

Btw nicely done quiz app. Love its simplicity.

@V88 :point_up:

Hey @christian_k we’re glad that you liked it and thanks for the input. There’s a couple of ways to get a number in a circle followed by some text:

3rd Party Service
Checkout ui-avatars.com as a super-quick and simple way to generate your image, then simply use it in a collection.

If you need more flexibility and aren’t using a collection then you can some HTML to a Rich Text component a bit like this:

<span style="display: flex; align-items: center; margin-top: 0px">
  <span style="min-width: 30px; min-height: 30px; width: 30px; height: 30px; background-color: #02566A; color: white; border-radius: 50%; text-align: center; line-height: 30px; vertical-align: middle; flex-shrink: 0;">1</span>
  <p style="margin: 0 0 0 10px; vertical-align: middle; font-weight:500; font-size:100%">The first question</p>

Hope that helps.


Thanks! Both are amazing tricks, thanks so much! I love how this solution blends with the other elements, looks like a native feature.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.