Beautiful Design App

Guys, thanks so much for the tip, now I feel my apps are so much more alive with this new addition!

10 Likes

Woooow!!

1 Like

Right. Only way to target the selected choice is to use unnamed classes.

@Jason, we’d LOVE a way to have a “menu/tabs” choice component style like this:

16 Likes

Joe this is a really cool project - are you working on this alone?

I had a very similar idea for a difference target audience, would be cool to get your thoughts and :brain: storm

Read this as a challenge :wink: this code below produces something similar.

However a native option for this really would make a lot of sense

[data-test="app-inline-picker"] {
    padding: 0px;
    margin: 0px;
}

[data-test="app-inline-picker"] .ips-inner {
    padding: 0px;
    margin:0px;
    height: 46px;
    background: transparent !important;
}

.bYahys {
color: rgb(0 0 0);}

.dMZZie {
    color: #000;
    background-color: transparent;
    border-radius: 0;
    border-bottom: solid;
    border-bottom-color: black;
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px;
}

4 Likes

Right. As you’ve shown, you can create the interface, BUT it requires you to use unnamed classes:

These are volatile and subject to change at a moment’s notice which breaks the CSS.

1 Like

Hello people, I bring you my little contribution. I hope you like it.

7 Likes

That would be so nice +1

Yep I’ve done everything myself! Sure, you can pM me any questions and I’ll try and help!

1 Like

Inspired by this topic, which brought up the fact that we can’t apply CSS to a search screen, I bring you a custom :mag:search box based on a text entry.

<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(1) .tf-inner {
color: black;
height: 36px;
border-radius: 10px;
background: rgba(0,0,0,0.05);
padding: 0px 6px 12px;
-webkit-box-align: center;
width: 100%;
border-bottom: none;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) .ta-inputbox {
padding: 6px;
}
13 Likes

This is genius @ThinhDinh

Thanks so much!

1 Like

I concur, this is genius!

1 Like

Genius bro :clap:

1 Like

It goes a bit deeper than just the name (as I show here) if you want to search for other columns inside the rows of the inline list, but I’m sure with more “or” filters we can do that.

1 Like

if the first letter of the name could be extracted in another column it would automatically be very precise

This is so cool ThinhDinh! Definitely going to use this somewhere! Thanks for sharing!

It made me think - why is it that the “native” search bar provided by Glide can return dynamic results to individual users but just a normal Text Entry Component and Text Column cannot? Is the native search bar “user-specific” by default? Would a native search bar as its own Component and/or Action be possible? :thinking::nerd_face:

1 Like

Wow that was fast. A truly smart mind.
Thanks also for the short video, I will try to develop what you quickly developed in CSS. I hope to get a good understanding of how you devised the system. If you had some time to articulate it all better that would be wonderful.
Thanks for the time you and everyone else devotes to this community. I can tell it is a subject you enjoy and you do it gladly. :muscle:

2 Likes

Yes, the search bar is user-specific by default and handled internally by Glide. I doubt we need a further native search bar component as you may only want to search on lists, and we can enable that from the lists themselves. What can be handled better is if there are no searchable components visible on the screen then the search bar should be hidden.

Thanks for the kind words, the CSS includes two parts, which are also two elements within the text entry component, as far as I understand. We have a tf-inner class combined with a ta-inputbox class to make up the component.

The first part in the CSS tries to imitate the greyish background of the search bar, while the second one re-positions the input box so it fits with the background in the first part.

2 Likes

I recently created an annotations tab, in which I can choose the color of each note with the help of CSS. Did you like it?

10 Likes

@Pedroydzito

Impressive!

1 Like