Tell Glide how you use CSS

it is now… I update it

1 Like

I think you’re using an unstable class name here and may vary from app to app, which makes it possible that this won’t work in an app that is not the one you take this class name from.

1 Like

omggg

1 Like

yes, you right… but then you can’t control the width because it will push the button out of the screen…
if there is a problem you can always use your method…

[data-test="app-switch-view"] :nth-child(1){
   
font-weight: 500;
    font-size: 1rem;
    line-height: 1.1875rem;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: red;
    text-overflow: ellipsis;
    white-space: break-spaces !important;
    overflow: hidden;
}

This looks great!

Curious - what’s the code you used to stick the choice component to the top of the screen?

Thanks

A simple CSS with position fixed parameter.
Will be at my pc in the morning and can send you

Hi, a nice CSS trick thanks to @ThinhDinh to submit an Edit screen even if required choice components are not selected.

Use case: in an Edit screen, wish to display many choice components in bar for UX matters (instead of dropdown menu), but with 5 items.
→ This implies to make the choice component required, even if it is not mandatory in reality
→ This implies that the User is unable to submit/done the Edit screen if each component have not been selected.

https://community.glideapps.com/t/edit-screen-or-visibility-conditions-on-entry-ones/29564/12?u=ays_0908

(nb: CSS to be created before choice components are created)


[data-test="nav-button-Done"] {
pointer-events: auto;
}
1 Like

Sir can you please provide me the css of the 1st one
please please please

Has anybody figured out how to apply CSS to a specific button type (solid, transparent, border only) without using the class name (ex: .ijHjak)?

My buttons also have visibility so it appears nth-type(#) changes based on which buttons are visible to the user as one person might have 8 buttons and another might see 10.

1 Like

Yes, this is a key point anyone should take into account every time you use a position-specific CSS.

You would have to do a math, then a template OR have the right conditional visibility conditions for each type of user, taking into account every element on the screen.

I guess I’ll have to wait until Glide implements button specific classes. There is [data-test=“app-button-view”], but that effects all button types and not a specific type of button.

@Jason Maybe we can do like [data-test=“app-solid-button-view”], etc for each button type? Could be a good item for the next Live session!

1 Like

For this problem I made this request

5 Likes

That makes A LOT of sense! So in theory, if you rename the Button 1 component “Hello”, it would get a class name of like “button-hello”, which you can then use with CSS to target that specific button.

4 Likes

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