# Badges formatting issue

**URL:** <https://forum.inaturalist.org/t/badges-formatting-issue/17551>\
**Category:** Forum Feedback\
**Created:** [October 23, 2020, 6:29pm UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551 "2020-10-23T18:29:19Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![astra\_the\_dragon](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/astra_the_dragon/32/37251_2.png) [@astra\_the\_dragon](https://forum.inaturalist.org/u/astra_the_dragon)\
**Post date:** [October 23, 2020, 6:29pm UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/1 "2020-10-23T18:29:19Z")

</div>

This is the most minor of issues, but recently when you click on a user profile and get the little window, the badges leak past the edge like this:

 ![leakingbadges](https://us1.discourse-cdn.com/flex016/uploads/inaturalist/original/2X/f/ff0430448b9e63ddd3e0af39c3580255b3e10be8.png)

A minor irritant, but now that I have seen it, I cannot unsee.

---

<div class="post-metadata">

**Author:** ![teellbee](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/teellbee/32/15498_2.png) [@teellbee](https://forum.inaturalist.org/u/teellbee)\
**Post date:** [October 23, 2020, 7:04pm UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/2 "2020-10-23T19:04:28Z")

</div>

Is this the same issue? In my case, additionally, about a 1/3rd of the pop up is cutoff on the left side.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/inaturalist/original/2X/f/fbd343731c75d191218e1b3c09f0f374f6eb566b.jpeg)  
iOS 14.1, Safari

---

<div class="post-metadata">

**Author:** ![dooug](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/dooug/32/13258_2.png) [@dooug](https://forum.inaturalist.org/u/dooug)\
**Post date:** [October 23, 2020, 7:05pm UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/3 "2020-10-23T19:05:13Z")

</div>

I also see this on, on this page in fact :)

 ![Screen Shot 2020-10-23 at 3.03.25 PM](https://us1.discourse-cdn.com/flex016/uploads/inaturalist/original/2X/a/a8ea59d8f51747e69501b4f49bc9c90263fac1f4.png)

Macbook Pro. Google Chrome Version 86.0.4240.80 (Official Build) (x86\_64)

---

<div class="post-metadata">

**Author:** ![tristanmcknight](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/tristanmcknight/32/12490_2.png) [@tristanmcknight](https://forum.inaturalist.org/u/tristanmcknight)\
**Post date:** [October 23, 2020, 7:19pm UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/4 "2020-10-23T19:19:03Z")

</div>

This is a different issue and so I’m probably supposed to split it out, but if we’re looking at formatting problems with the badges I also wish we could get the badges array set up in a consistent order. For example, the bronze and silver levels for the reply / topic / link badges are stacked in order, but the golds got mixed up.

 ![iNat_badges_array](https://us1.discourse-cdn.com/flex016/uploads/inaturalist/original/2X/c/c5c18c5355709626f909f7957268e809c7452333.png)

Seen on a Lenovo ThinkPad running Google Chrome Version 86.0.4240.75 (Official Build) (64-bit)

---

<div class="post-metadata">

**Author:** ![teellbee](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/teellbee/32/15498_2.png) [@teellbee](https://forum.inaturalist.org/u/teellbee)\
**Post date:** [October 23, 2020, 8:05pm UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/5 "2020-10-23T20:05:09Z")

</div>

> [@tristanmcknight](#):
>
> For example, the bronze and silver levels for the reply / topic / link badges are stacked in order, but the golds got mixed up.

Huh, on the Badges page in my profile, there doesn’t seem to be any order at all. I just figured the icons were shown in the order received.

---

<div class="post-metadata">

**Author:** ![astra\_the\_dragon](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/astra_the_dragon/32/37251_2.png) [@astra\_the\_dragon](https://forum.inaturalist.org/u/astra_the_dragon)\
**Post date:** [October 23, 2020, 9:22pm UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/6 "2020-10-23T21:22:09Z")

</div>

> [@teellbee](#):
>
> in the order received.

Whatever order there may be, it isn’t that…

---

<div class="post-metadata">

**Author:** ![tristanmcknight](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/tristanmcknight/32/12490_2.png) [@tristanmcknight](https://forum.inaturalist.org/u/tristanmcknight)\
**Post date:** [October 23, 2020, 9:38pm UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/7 "2020-10-23T21:38:30Z")

</div>

Yeah, this was showing a different spot. Not the badges page on your profile, but the global list on [https://forum.inaturalist.org/badges](https://forum.inaturalist.org/badges) where it checks off the ones you’ve earned. Sorry for the confusion!

---

<div class="post-metadata">

**Author:** ![jasonhernandez74](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/jasonhernandez74/32/33615_2.png) [@jasonhernandez74](https://forum.inaturalist.org/u/jasonhernandez74)\
**Post date:** [November 8, 2020, 2:48am UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/8 "2020-11-08T02:48:11Z")

</div>

I just like that you picked my profile as your example… 😃

---

<div class="post-metadata">

**Author:** ![cthawley](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/cthawley/32/1445_2.png) [@cthawley](https://forum.inaturalist.org/u/cthawley)\
**Post date:** [January 15, 2021, 3:24pm UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/9 "2021-01-15T15:24:46Z")

</div>

Looking at the page they are organized by:  
Level 1: Category (Getting Started, Community, Posting)  
Level 2: Color/Metal (Bronze, Silver, Gold, within Category)  
Level 3: Alphabetical (within Color/Metal)

On the profile page (at least mine), though, there only appear to be two levels:  
Level 1: Color/Metal (Bronze, Silver, Gold)  
Level 2: Alphabetical (within Color/Metal)

Not that that’s the best scheme…

---

<div class="post-metadata">

**Author:** ![astra\_the\_dragon](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/astra_the_dragon/32/37251_2.png) [@astra\_the\_dragon](https://forum.inaturalist.org/u/astra_the_dragon)\
**Post date:** [January 28, 2021, 12:38am UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/10 "2021-01-28T00:38:35Z")

</div>

Solved on another thread.

---

<div class="post-metadata">

**Author:** ![astra\_the\_dragon](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.inaturalist.org/astra_the_dragon/32/37251_2.png) [@astra\_the\_dragon](https://forum.inaturalist.org/u/astra_the_dragon)\
**Post date:** [January 28, 2021, 12:38am UTC](https://forum.inaturalist.org/t/badges-formatting-issue/17551/11 "2021-01-28T00:38:51Z")

</div>


