Tell Glide how you use CSS

i haven’t used CSS yet because it seems complicated. maybe a general explanatory video would help, i haven’t found any on YouTube in English…

Why is it that sometimes, and with some CSS, the components in the editor look different in the real app? Some times the position of the component is different than in the real app.

My guess would be that it is browser-specific behaviour. CSS is a black art (at least to me), and getting it to play nicely with all browsers can sometimes feel like an endless game of whack-a-mole.

2 Likes

I don’t know if it will help you, but we can perfectly select a single specific button if it is defined as floating.

I did not! Could you explain further?

1 Like

Due to the fact that the float button has the customizable title attribute which is normally used as a tooltip, we can use this to select exactly that element.
Wait a few minutes … I’m sharing an app that I wrote as an exercise.

1 Like

@Joe_Gabriele Copy this APP, the concept is very simple.
If you want to customize a button you can edit its style in the “Button Types” Tab of this app.

Dear @Jason it would be incredibly much easier to select any component if we could have a programmable attribute (even better if dynamic) as is the case with the floating button.

3 Likes

@Roldy Happy Cake Day!! :cake: :partying_face:

2 Likes

Oh thanks! I have been here for a year and I have learned many things thanks to you and this whole community! :smiling_face_with_three_hearts:

5 Likes

Perfect thank you so much! Ill have to try this later to see if I can get it to work how I need to. This could save a lot of frustration! Guessing to change it from a floating button to a normal one, I can just manipulate the CSS?

Currently I use a solid button (first), multiple transparent buttons (middle) and a border only button (last) to create what I currently use:

3 Likes

Of course you can manipulate the CSS in every way, but unfortunately the DIV element of the normal button does not have the title attribute (as it has the float button instead).
So we lose the fact of being able to select a specific button, and we can only select all those present in the detail screen using the attribute: [data-test = “app-button-view”].
Or, at least I can’t do better than this…

1 Like

Hey Roldy, I tried the floating button and its working, sort of. Any idea how to not make it floating? Also, if I have 2 floating buttons, the last one, which I am trying to manipulate, always stays at the bottom.

1 Like

No idea about the possibility of making them non-floating because in the detail screen (DOM of Glide), the parent element of the floating buttons is different from the parent of the non-floating buttons (and all other components that do not float). This is the reason why it is not possible to make them non-floating by hooking their ordinal position to that of the non-floating elements.
Also, according to my knowledge, with CSS it is not possible to change the parent of a child element; it could be done in javascript but we can’t use it here.

However, you can change the position of a floating element, but only considering the screen size. You shouldn’t have any problems doing this, as for each floating button you can express the positioning in a fixed way by specifying with the TOP and LEFT properties the coordinates of each in pixels of the screen or as a percentage of the screen size; for example like this:

position: fixed! important;
top: 50%;
left: 50%;


Of course this is an inconvenient solution if your APP is intended to be used in devices with possible different screens (as most of the APPs are); so I do not recommend it because it is not fully responsive to the contents of the app detail.
I have a case where it is fine, but it concerns a scenario where the size (resolution) of the monitor is predefined and has no scrolling.


Definitely, I believe that the customization normal-button problem would be perfectly solved if we could selectively work with normal buttons: it would be enough for the Glide developer team to add a customizable attribute to the normal buttons as they did with the float buttons thanks to the title attribute.

Maybe I have dwelt a little too much and maybe we went off topic … let’s continue elsewhere in case you need it.

2 Likes

@Jason This is how I use CSS quite heavily. This is an unconventional use of the current Glide, of course, hoping my job will be easier when the desktop version of the display is activated in the future.
As you can see, @Joe_Gabriele , here I have no difficulty with the customization of the floating buttons because the screen size is fixed and known.
This is an experiment of an APP which is an interactive infopoint.

5 Likes

Thanks, I appreciate all your help!

1 Like

I’ve been waiting for this to finally be discussed. Just off the top, with CSS, I could really beautify my app for my users (employees). Sprinkle a little bit of JS and Javascript, well this could be combined with CSS to create animated blocks (timed, on hover, on scroll, etc).

  1. Screen resolution customizations.
  2. Animation (on the entrance, exit, hover, scroll, on action — success message “FadeOutUp”)
  3. Create custom backgrounds (gradient, video, fixed, animated, etc)
  4. Form field design optimization?

Thanks for reading!

3 Likes
  1. RTL!!!
  2. Colored text
  3. Background images + filters
  4. Align 2 or more component in one row
  5. HTML tables class (the html table is built in the data using template columns and joined lists)
  6. Image sizing
  7. Fonts (don’t always work in Hebrew on different devices)
  8. Hiding back buttons on screens where the user must proceed with action
  9. Customizing cards and tiles view
  10. setting custom text for back button and other implemented text features (works sometimes).
  11. Bubble counts on components




still not perfect

4 Likes

Nice design, how did you put 4 charts in a row?

Thank you Max!

Inline list + QuickChart

1 Like

Thank you, there is so many things that can be done in glide that I’m not aware of

2 Likes