Quick question about the Glide University app

[christian_k]

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.

[Darren_Murphy]

@V88

[V88]

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.

HTML
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>
</span>

Hope that helps.

[christian_k]

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