Floating Form Button

Crazy thing, it suddenly stopped working and the buttons are as they usually are one on top of the other :man_facepalming:t3:

thanks @ThinhDinh, will love it if next week we can do a quick zoom where you can shohow to do this as I use chrom on windows and can’t find what you’re showing,

2 Likes

That’s true. I also checked my App. It’s no more working.

I guess, we might need to avoid using CSS till the time Glide allows us officially, or atleast we have good knowledge of how CSS works.

3 Likes

Hello everyone,

Yesterday I was editing right at the time of the update, :rofl: :sweat_smile: ,

, for those who need it I’m using the code below for the floating buttons.

<span><style>
.sc-euEtjk{position:fixed;
	         width:80px;
	         height:40px;
	         bottom:13%;
	         right:5%;
	         border-radius:30px;
	         text-align:center;
	         box-shadow: 2px 2px 3px #999;
             font-size:15px;
             font-weight: normal;}
</style></span>

PS: my buttons are not circular , if yours does, use this:

<span><style>
.sc-euEtjk{position:fixed;
	         width:60px;
	         height:60px;
	         bottom:10%;
	         right:5%;
	         border-radius:50px;
	         text-align:center;
	         box-shadow: 2px 2px 3px #999;
             font-size:15px;
             font-weight: normal;}
</style></span>
2 Likes

I would love to have a Zoom call but probably will have to resort to a detailed write-up step-by-step. As you can notice above, it’s the class name that changed.

1 Like

Try this…might be more future proof

<pre><span><style>
[data-test="app-button-view"] { 
     position:fixed;
     width:60px;
     height:60px;
     bottom:10%;
     right:5%;
     border-radius: 50%;
     text-align: center;
     box-shadow: 1px 2px 20px 0px #444 !important;
     font-size:40px;
     font-weight: normal;
}
</style></span></pre>
3 Likes

Show!!

I wanted a solution similar to this for a floating button that saves a PDF from the screen.

Thanks for the tip @Robert_Petitto. Just implemented with [data-test="app-button-view"]. The only thing I had to do different was remove the double quotes around app-button-view for it to work. Not sure why, but it only worked without the quotes.

Now if I could figure out the same for stacked buttons. Right now I have to have each button at a different opacity level so they get assigned different sub-level CSS Class names. Now I’m using [data-test="app-button-view"] for all parameters except bottom position and setting the bottom position based on the sub class. This works for chrome on windows and android. Not sure about any other OS/Browser as it appears to be device specific…so eventually the bottom position part will break again and the buttons will overlap in some weird position on screen.

<span><style>
[data-test=app-button-view] {position:fixed;
                 width:60px;
                 height:60px;
                 right:5%;
                 border-radius:50px;
                 text-align:center;
                 box-shadow: 2px 2px 3px #999;
                 font-size:40px;
                 font-weight: normal;}
.ctLXSv{bottom:20%;}
.llngAz{bottom:10%;}
.ivGfwB{bottom:20%;}
.egCsbX{bottom:10%;}
</style></span>
1 Like

If you don’t wrap the code with <pre> then the quotes get encoded which breaks the css.

1 Like

Got it. Thanks!

2 Likes

@Robert_Petitto I am trying to add this to my app. If I have no other button in the same page, it works perfectly. However, I have a page that already have 1 form button and 1 link button. I want too add floating Book Now button in addition to what I already have. When I insert Book Now button and insert the RICH text with code, both of the existing button (form button and link button) disappear. What can I do?

And… one page’s layout is set for tiles, there is no way of adding this, is it?

Thanks

It will only work for details pages, where we can insert rich text.

@Jeff_Hager have you finished researching the multi floating buttons. Would love to have it as well.

Hi Yumi,

The buttons don’t actually disappear but rather theyre layered on top of one another. If you want to add it to a tile page, you’ll need to convert the screen to a details screen and add the inline list and button components.

To prevent the buttons from layering on top each other, you’ll need to add some :nth-child() classes to the CSS. I’ll craft an example in a bit.

3 Likes

Thank you!

I would be interested to see @Robert_Petitto’s solution as it may be better than mine.

This is what I’m using right now. I have a CSS google sheet tab that I then load into the User Profile sheet using Single Value columns. This lets me update the CSS globally and fill the rich text component from the single value columns in the User Profile.
image

For both single and dual buttons, at Robert’s recommendation and as indicated in my earlier post (Floating Form Button), I’m using ‘[date-test=app-button-view]’ instead of a class name to future proof my buttons. For the bottom positioning, I had to create multiple bottom positions to cover multiple button positions on multiple devices. I also had to have one button as a solid color and one as a semi-transparent color so I could have separate class names to differentiate the too. It’s been working so far so I haven’t done anything to improve on it, but I’d be all for something a little more solid if Robert has something.

This is what my dual buttons look like.
image

Currently I only use these solutions if I have one or two buttons on my screen…or I have buttons with visibility conditions that only make one show at a time. Otherwise, yes, it hijacks all buttons and overlays them on top of each other.

7 Likes

Thanks for the sharing Jeff!

1 Like

I tried targeting just the first button of a list of buttons, and it’s impossible to do without using the unnamed classes (eg .dssHF) which WILL break at some point. Jeff’s solution is the best solution so far I think.

2 Likes

Hi @Jeff_Hager my buttons are still being hijacked…

1 Like

Can you show what your CSS looks like right now? Depending on how it’s set up, it’s going to hijack all buttons. If you only want one button to be a floating button, then it has to have a different transparency for the button background compared to the other buttons. Then that will give it a class name that’s different from the other buttons and the CSS will have to reference that different class name.

Just keep in mind that these are all hacks and when using specific class names, it most likely will break down the road when Glide makes a change that affects the class name.

2 Likes

I got it to work, Thank you.

1 Like