FlairImage in Random Position

Product Support

AI-generated summary

In a support thread titled “FlairImage in Random Position,” barreeeiroo reported that avatar flair images were appearing at the bottom right corner of posts on desktop (but not mobile), seeking help. They listed numerous installed plugins, including discourse-yuml, discourse-branding, and others. Yuun identified the issue as a CSS override: .topic-avatar { position: static; } — which should normally be position: relative;. Yuun clarified the position isn’t random, but consistently bottom-right. barreeeiroo confirmed the fix worked after applying custom CSS via a new theme and planned to investigate the root cause later. dax mentioned a possible issue with the yuml plugin, referencing another thread, but barreeeiroo confirmed yUML works fine in their community. The core fix was CSS-related, not plugin-related.

1

Could anyone help me?
Avatar Flair Images appear at the right bottom corner of the screen

image
image1366×768 86.7 KB

It’s on DesktopView
On MobileView it doesn’t display :confused:

Plugins Installed:

          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/davidtaylorhq/discourse-whos-online.git
          - git clone https://github.com/discourse/discourse-translator.git
          - git clone https://github.com/discourse/discourse-solved.git
          - git clone https://github.com/discourse/discourse-cakeday.git
          - git clone https://github.com/discourse/discourse-assign.git
          - git clone https://github.com/discourse/discourse-signatures.git
          - git clone https://github.com/discourse/discourse-push-notifications.git
          - git clone https://github.com/discourse/discourse-staff-notes.git
          - git clone https://github.com/vinkas0/discourse-branding.git
          - git clone https://github.com/discourse/discourse-presence.git
          - git clone https://github.com/discourse/discourse-voting.git
          - git clone https://github.com/Ebsy/discourse-nationalflags.git
          - git clone https://github.com/discourse/discourse-adplugin.git
          - git clone https://github.com/sekhat/discourse-yuml.git
          - git clone https://github.com/berlindiamonds/discourse-sync-base
          - git clone https://github.com/xfalcox/discourse-backups-to-dropbox.git discourse-sync-to-dropbox
          #- git clone https://github.com/gdpelican/babble.git
          - git clone https://github.com/discourse/discourse-chat-integration.git
          - git clone https://github.com/angusmcleod/discourse-quick-messages.git
          - git clone http://www.github.com/gdpelican/retort.git
          - git clone https://github.com/vinkas0/discourse-navigation.git

Any idea what can make it so random?

2

I don’t know what put it there, so well, but this line in your CSS:

.topic-avatar {
  position: static;
}

Appears to be the culprit, it’s normally:

.topic-avatar {
  position: relative;
}

Also - not random, always at the bottom right of your post. :stuck_out_tongue:

3

Thanks, thag solved the problem :+1:
I made a rapid fix by creating a new theme and importing it with custom CSS

Tomorrow I will look and see what’s causing that bug

:stuck_out_tongue_winking_eye:

Well, yeah… :sweat_smile:

4

Someone has reported having problems with the yuml plugin if you may be interested:

5

In my community it’s working with yUML