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, 
,
, 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.
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.
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
I have been trying to use this code to have two floating buttons but it only turns on of them into a floating one.
I have no idea what I am doing wrong.
This is the CSS I’m currently using.
<pre><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 !important;
font-size:40px;
font-weight: normal;
background-color: rgba(41, 87, 122, 0.118) !important;
backdrop-filter: blur(4px);}
.ctLXSv{bottom:10%;}
.llngAz{bottom:20%;}
.ivGfwB{bottom:10%;}
.egCsbX{bottom:20%;}
</style></span></pre>
Each button has to have a different transparency level set so that each button has a unique class name. I need the unique class name so I can set different bottom positions for each button.
A couple of things that I have changed so far in the CSS is the setting of the background color so all buttons match each other and match my theme, even though they have different transparency levels set. I also added a backdrop filter with a blur, so they have that glassy blurred look to stand out more.
The classes I’m using for the bottom positions work for Chrome on windows and Chrome on Android. I’m not entirely sure how it looks on Apple/IOS devices, so they may need additional class names added to set the bottom positions.
As for the button’s use, one is a form button and the other is a Link to Screen button.
6 Likes