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? [image] Searching everything from the home screen: tabs, col…

[image] CSS Library [image] How to Maintain Container Layout on Mobile Devices Community Resources Seeing a desire to maintain a container layout that is not responsive to mobile devices, you can still achieve this through the “grid-te…

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

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

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.

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.

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

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

Oh, you’ve got the code. .grid-container .threeColumns { grid-template-columns: repeat(3, minmax(0px, 1fr)); }

hahaha, I actually played around until I got this same code. Was proud of myself :laughing: first i tried .3-columns then, .threecolumns then .threeColumns ureka!

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? [image]

How to create filter bar like this?

Ask for Help

Jeff_Hager June 20, 2024, 6:35pm 6

Topic		Replies	Views
CSS for hiding stuff! Community Resources tutorial	89	8644	March 6, 2024
Tell Glide how you use CSS General	128	18128	December 27, 2022
Multirow Choice Component (aka Chips UI) Feature Requests	156	8945	October 8, 2021
Custom search box in the detail tab Ask for Help	38	2833	October 7, 2022
Button Bar more than two buttons Ask for Help	50	2740	January 19, 2022

How to create filter bar like this?

Related topics