How to create filter bar like this?

[Sekayi_Liburd]

hi guys! I would like to create a filter bar similar to what @Darren_Murphy shows in this video. More specifically, i would like to have 3 or 4 text entry components appearing on the same line like in the video.
How do I accomplish it?

@Darren_Murphy

The above is just a fairly simple example of what you can do in terms of custom filtering with data editor logic. For a somewhat more advanced example, check the below video:

---

If the above video won’t play, paste the following URL into a browser:

https://www.loom.com/share/4398b34185c9435bacdd51b2332db722

Chat GPT suggested using this code in a rich text component but I wasn’t able to implement it successfully: Maybe I didn’t put the code it the right place…

<div style="display: flex; justify-content: space-between; align-items: center;">
  <div style="flex: 1; margin-right: 10px;">
    <input type="text" placeholder="Text Entry 1" style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
  </div>
  <div style="flex: 1; margin-right: 10px;">
    <input type="text" placeholder="Text Entry 2" style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
  </div>
  <div style="flex: 1;">
    <input type="text" placeholder="Text Entry 3" style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
  </div>
</div>

[Jeff_Hager]

That just looks like a 4 column container with each component inside the container.

[Sekayi_Liburd]

ok thanks.
I had actually tried a 3 column container but the components still appeared on separate lines.

[Jeff_Hager]

Are you previewing in mobile view? The container columns will only be side by side in desktop view. Otherwise, yes, you would have to dig into some CSS.

[Sekayi_Liburd]

yes, I’m previewing in mobile mode. How can I get a nice neat bar for mobile?

I don’t want the filter to take up so much room on the page but I want the option to type in filter parameters.

[Jeff_Hager]

CSS Library

How to Maintain Container Layout on Mobile Devices

Seeing a desire to maintain a container layout that is not responsive to mobile devices, you can still achieve this through the “grid-template-columns” code. Here’s the code you need to add to your application’s custom CSS: Note: class name is grid-container .grid-container .oneToOne { grid-template-columns: repeat(2, minmax(0px, 1fr)); } [Screenshot 2024-05-03 at 08.21.54] [Screenshot 2024-05-03 at 07.52.33]

[Sekayi_Liburd]

I’ll check it out!

[Himaladin]

Wouldn’t 3 columns in a row be too small on mobile?

[Sekayi_Liburd]

it’s kind of small, yes… I’m still testing it out.

[Himaladin]

Oh, you’ve got the code.

.grid-container .threeColumns {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
}

[Sekayi_Liburd]

hahaha, I actually played around until I got this same code. Was proud of myself

first i tried .3-columns
then, .threecolumns
then .threeColumns

ureka!

[Sekayi_Liburd]

Can I make the clear search button (done with rich text) right-aligned? And maybe also decrease the font size a little since the boxes are small?

[Himaladin]

Does the previous code work in this composition?

[Sekayi_Liburd]

yes, it works but the button is showing up on the left instead of on the right of the text entry.

[Himaladin]

Try pasting the code again. I forgot where I saved it.

[Sekayi_Liburd]

<!--Delete Button-->
<div class="cross" style="float: right; margin:0px 2px 0 auto; 
height: 25px;width: 25px; opacity:0.4;border-radius: 10px;
z-index: 5; filter:invert(0.1);"><img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/ov2nF5ayQc4wK5jVvF4R/pub/pJe35hcDzEqIcW2idyHc.webp" alt="Cross Button" style="margin-top:-37px;"/></div>

[Himaladin]

Still works with float-right.

[Sekayi_Liburd]

did you get that result from the code i sent?
Mine is number entry instead of a text entry… I think this is the issue.

[Himaladin]

Yes

[Sekayi_Liburd]

the number entry has arrows on the right so maybe that’s why my button moved to the left