1

I work in solid-js and I would like to add a floating button to the far right of a screen in my application. After reading this article on creating floats in Tailwindcss..., I wrote the following code:

export default function SearchEngine() {
  return (
    <> 
           ...
    <BsChatLeftTextFill size={41} class="float-right text-blue-500 "/>
    </>
  );
}

This did create a button on the far right of my app, but when I scroll down the tab bar, my button position is influenced by it. In my opinion, given that this is a floating button, the button should remain visible at the far right of my application despite scrolling the page, in its initial position and this is the behavior I expected. I looked on the Tailwindcss documentation, but the property I'm using is indeed the correct property.

gks
  • 191
  • 1
  • 4
  • 18

1 Answers1

2

Here is my solution:

      <BsChatLeftTextFill size={41} className="fixed bottom-3 right-14 text-blue-500 " />

The word to remember is the word fixed which allows you to maintain the same position despite scrolling. The words bottom-3 and right-14 are used to determine the position of the fixed element relative to the left and the bottom. It is also possible to determine the position relative to the top and to the right thanks to the keywords top-x and left-x

gks
  • 191
  • 1
  • 4
  • 18