Hacking optional component through CSS

Ask for Help
1

Hello @Robert_Petitto and my fellow Glider. I watched a video of yours @Robert_Petitto on using CSS to hack form buttons. I tried using the same format to hack the Location button component on Glide Form. I noticed that when I go to Settings → Appearance and set it to “Preview Custom CSS,” it works, but as soon as I close the application, it stops working. I also set it to “Use Compile CSS,” but it wasn’t working either. Here is the code I used: “#page-root:has(.prevent-submit) [aria-label=“Submit”] {pointer-events: none; opacity:0.4;}”
The code seems fine, but I don’t know what the issue really is. What would you say is causing the problem?
Captu

2

If you want to apply Custom CSS, the “use compiled CSS” button should always be off. Conversely, if you do not want to use custom CSS, you should revert to the default (compiled) CSS from Glide. The “preview custom CSS” button only affects the builder, not your app, and will automatically turn off when you close the builder.

3

Does it work in the published app regardless of whether you check the “preview custom css”?

4

No, it doesn’t work on my publish app

5

i tried it both when it was turn on/off it doesn’t work

6

Is your language in your application English?

7

yes it is

8

Can you provide more complete data if you want help finding the source of the problem:

  1. Does your hint component already exist and have a class name with prevent-submit and visibility set?
  2. Apart from this code, is there any other code in your custom CSS box?

3 Try recopying your code or using an alternative from the following link: Exploring the Enhanced Capabilities of Glide's Native Form - #12 by Himaladin

9

Capt
Capture

10

Please explain whether when your hint component appears, your submit button is still on. Sorry, I can’t guess what your problem is if you don’t have enough data. What you display temporarily does not indicate any errors.

11

I found a strange behavior specifically for this Location component. @Jeff_Hager does this indicate this component continues to record location and is not empty even when it is turned off.

ScreenRecording2024-07-24at21.47.39-ezgif.com-video-to-webp-converter

12

Once a location is acquired, it will not become empty when you turn the switch off again. It will keep the last known location.

2 Likes
13

There is still a way out for @Jeff_Hager. :wink:

ScreenRecording2024-07-24at23.55.00-ezgif.com-video-to-webp-converter

1 Like
14

The Hint appear when the location is OFF and disappear
Capture
when the location is ON

15

This is exactly how i expected it to behave, can you share a video or explain how you set this up

16

Is your problem the same as what I showed in the image or different?

Give me some time, I need to test it again before I share it to the forum. I stopped because the Glide always didn’t respond or slowed down.

17

Issue is, your using Tailwind CSS code, but it doesn’t work “as is” here in Glide.
It will work with some work.

18

Thanks

19

I should compile this CSS with other components for easier searching later. I have only tested it on the switch component, not on others. For now, I am loading it here and hope you can provide feedback/clear information if any issues are found with other components.
This CSS logic only detects whether the button is on or off and does not detect whether the coordinates have been obtained or not as before, especially when you are facing low GPS signal.

class name: locSwitch

#page-root:not(:has(.locSwitch .peer:checked)) [aria-label="Submit"] {
    pointer-events: none;
    opacity: 0.4;
}
20

Here is what i did, the class name: locSwitch i input this on the CSS class on my location button and i input this code below you shared on the setting-Appearance section and it still doesn’t work
“#page-root:not(:has(.locSwitch .peer:checked)) [aria-label=“Submit”] {
pointer-events: none;
opacity: 0.4;
}”

1 Like