Forum Discussion

Qrew Legend

8 months ago

Code to make a colored circle with a number inside it

Does anyone have any code to dynamically make a circle with a number inside it? Or a rectangle box with a number inside similar to the Dashboard widgets Gauge charts on a New Style dashboard. Thin...

MarkShnier__You

Qrew Legend

Awesome. Not I don't need the inner circle. I see I can control the font color of the words so I can choose a contrasting color (probably black or white) according to what is most readable for that background color.

------------------------------
Mark Shnier (Your Quickbase Coach)
mark.shnier@gmail.com
------------------------------

ChayceDuncan

Qrew Captain

8 months ago

Just make sure that if you change the overall size of the circle you keep the height/width the exact same - and then the line-height is just there to force the div to vertically align the text in the middle. It should be right around the same px of the height/width as well but not exact given the shape of the element.

------------------------------
Chayce Duncan
------------------------------

MarkShnier__You
Qrew Legend
8 months ago
Chayce, how do I control the font size, so I can scale the circle larger and increase the font size?

------------------------------
Mark Shnier (Your Quickbase Coach)
mark.shnier@gmail.com
------------------------------
- ChayceDuncan
  Qrew Captain
  8 months ago
  You can add font-size: 12px (or whatever font size in pt or px that you want)
  
  "<div style='font-size: 12px; font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%'>1</div>"
  
  Based on how big you want you may have to increase the size of the div to make it look good but otherwise adjust as you need. I believe the default QB font-size ends up being 12px as a reference point to adjust from.
  
  ------------------------------
  Chayce Duncan
  ------------------------------