Beautiful Design App

[Pedroydzito]

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

[adriasoce]

Woooow!!

[Robert_Petitto]

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:

[Harry_OBrien]

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 storm

[Harry_OBrien]

Read this as a challenge 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;
}

[Robert_Petitto]

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

@Harry_OBrien

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

.dMZZie {
    color: #000;

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

[Sergio_Perez]

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

[V88]

That would be so nice +1

[Joe_Gabriele]

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

[ThinhDinh]

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

Custom search box in the detail tab

Greetings to all Analyzing the detail of the tabs, I noticed that using the classic search box, when in the next step the application goes to the list of topics found, it loses the custom icon that I added with the CSS code. In your opinion, is there any way to add the described code? Or is there a method to have in detail a custom search box? I’ve scoured the community a bit, but it really seems like no one has ever had the same thought as me. As always, I thank you in advance for your resp…

<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;
}

[SantiagoPerez]

This is genius @ThinhDinh

Thanks so much!

[Joe_Gabriele]

I concur, this is genius!

[alfonso_ayala]

Genius bro

[ThinhDinh]

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.

[alfonso_ayala]

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

[ehdubya]

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?

[profxeni]

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.

[ThinhDinh]

@ehdubya

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?

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.

@profxeni

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 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.

[Pedroydzito]

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?

[SantiagoPerez]

@Pedroydzito

Impressive!