Positioning your Flare bars with CSS Selectors

You can use CSS Selectors to specify exactly which element it should attach to, using the CSS Selectors option (see under the Developer's Options in the editing panel for your Flare bar).

https://s3.amazonaws.com/assets-filament-io/knowledge_base/screenshots/why-isnt-my-flare-bar-showing-up_2.png

Tips to keep in mind
  • Choose a unique element on the page - if your chosen element appears in multiple places on the page (i.e. if it's designated with a class, and not an ID), Flare will show up multiple times on the page, because it cannot distinguish between them. Do yourself a favor, and use an ID!
  • Don't choose elements with the "overflow: hidden" attribute - It'll cause the tooltips containing the sharing buttons to get cut off (read more)
  • For vertical bars, choose elements that are taller than the vertical Flare bar itself. If the element is shorter than the bar, it'll default to "Pinned" positioning (read more)

Feedback and Knowledge Base