Tell Glide how you use CSS

@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

5 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

WOW!

Just WOW!! (double exclamation point)

1 Like

Disculpen, pero como hago para que funcione, soy nuevo

Hi, I’d like to access the inspirations notion please :slight_smile:

Here you go.

Thank You :smiley:

1 Like

This is very beautiful how did you do it? :smiley: