Floating Form Button

@yinon_raviv You can try this code.

<pre><span><style>
.ekttti {
width: 50%;
float: left;
}
[data-test="app-button-view"] {
margin: 10px;
}
.eEPsye div:nth-child(1), .eEPszt div:nth-child(1) {
display: block;
}
</style></span></pre> 

Make sure you put this rich component just above the buttons components. I am using this code and it is working in both OS.

Sorry, just increase the bottom position, say bottom:10%, or 50px, experiment until it looks good

THANKSSSSS
This one worked on both desktop and android nobile - kulululululiu

5 Likes

@yinon_raviv you tell the community to give it up but the community continues and finds the solutions. It’s cool😎

2 Likes

aboslutly. this is one of the best communities i’m in.

Pure pleasure and more important so rich with knowledge and desire to help.

4 Likes

Gonna send some screnshots later so you know where to debug if something happens.

appreciate that brother

1 Like

Here you are.

Each element in the screen of our app has their own class names, and it can vary app by app.

In this video below, I pointed out which part of the HTML code corresponds to which part in the app.

For example, .ekttti & data-test = “app-button-view” correspond to the button you use, I think it’s the same for all apps.

eEPsye & eEPzst is a bit more tricky, as it differs by operation system as you can see in the video, so I have to test on all OS before release.

If you know which element you’re acting on, you can customize your app a lot more. I usually edit straight on that inspect element screen before making changes in my rich text.

3 Likes

Glad it worked. This code was shared by @Robert_Petitto

1 Like

This is a bit ridiculous! Why are we learning CSS and HTML to format a floating form button? Isn’t Glide a no-code tool? :expressionless:

3 Likes

Totally agree. Some of us are just never satisfied. :wink:

Some of us always want more, and when new features are released, within minutes there are those people that ask for extra features on top of those new features without appreciating the fact that we just got something we never had before.

At least I’m hoping that this gives Glide the extra nudge to build some of this stuff natively.

For those that are familiar with CSS and HTML, I guess I don’t have a problem with them using it as they know the consequences. I’m more concerned about those that are plopping in this code with no knowledge of how it works or why they are doing it.

9 Likes

Exactly this.

Sometimes I get requests from customers to build this or that and I can’t give them a timeframe to do that natively, so I use CSS when I can and also take note of it as a “future roadmap” to bring that back to Glide’s native way when they offer it.

2 Likes

I just suggest to test inspection view in another browser tab, not inside glide editor

2 Likes

Thank you. I actually only did that when something doesn’t work out on the phones :joy::joy::joy:

1 Like

I was checking the app and found that css for adding the floating form button wasn’t working. Is this a bug?

Is there anyone in the same situation!?

Probably your class name is different, again.

1 Like

It was exactly what you said!! I really appreciate it every time :pray:

2 Likes

Yeah, I think the latest update from Glide changed the class names. My buttons all stopped working. I had just finished doing stacked floating form buttons on one of my screens too. It’s like they know… :wink: Well, can’t say I was never warned. That’s the price you pay for doing something that’s not supported.

image

4 Likes

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