How to create a floating button

Community Resources
21

Would suggest messing around with the configurations here.

Your screen on desktop and mobile might require different types of snippet (scrolling or non-scrolling).

22

Ok I’ll have a play around. Thank you

1 Like
23

sure

image
image812×961 34.3 KB

24

image
image884×834 3.57 KB

You can play around with variations of this.

.comment {
  margin: 0px;
  padding: 0px;
  background-color: none;
  top: 66%;
  left: 100%;
  width: 35px;
  height: 35px;
  position: -webkit-sticky;
  position: sticky;
  z-index: 999;
  margin-top: -0px;
}

.comment button div {
  width: 30px;
  height: 30px;
}

.comment svg {
padding-left: 10px;
  width: 30px;
  height: 30px;
}
3 Likes
25

you absolute legend. thanks.

Added in a button styling part, works perfectly:

//floating comment box
.comment {
  margin: 0px;
  padding: 0px;
  background-color: none;
  top: 14%;
  left: 100%;
  width: 35px;
  height: 35px;
  position: -webkit-sticky;
  position: sticky;
  z-index: 999;
  margin-top: -70px;
}

.comment button div {
  width: 30px;
  height: 30px;
}

.comment svg {
padding-left: 10px;
  width: 30px;
  height: 30px;
       color: white;
}
.comment button {
       background-color: rgba(255, 0, 102,0.5);
       width: 80px;
}
3 Likes
26

Added to the library, thank you!

27

Ooh I’m famous! :grinning:

2 Likes
28

Thank you… loved this post.

My application is to add a ‘new message alert’ that appears when needed and directs users to their inbox.

image
image581×1117 61.9 KB

29

So has the code been helpful for you to achieve that? I assume thee “message” button is the one?

1 Like
30

Yes the code was super helpful - in particular the video from the original post. I learned for the first time how to use the CSS code by defining the properties of the project. Something I have never seen in action before.

I will say I read all the extra replies beneath and noticed the discussion about being able to format the button but my button worked first time using the original post code. Looked fine, behaves fine and so I did not bother to understand the rest of the formatting replies.

1 Like
31

Just to add I particularly liked this since I was trying to achieve the same thing by having a twin tab called ‘:bell:MyJourney’ with visibility controlled by the need to flag new message alerts. But this has a couple of disadvantages:

  • you have duplicate and synch any changes made to the tab to keep the twin identical

  • as soon as the user visits the new tab and then views their new message, the condition for the tab visibility changes and the user is kicked out. Very annoying and this was difficult to fix without some tricky programing.

The floating button is workaround solution (the button is replicated across tabs). Not ideal but it works. Long term I wish Glide would hurry up and allow the Title of a tab to be dynamic. It’s sooooo overdue.

1 Like