CSS gurus, Please Help

Ask for Help
1

I need some CSS magic to disable the search bar. It is breaking my background CSS because i have now introduced 2 inline lists into the screen. I want to either disable the search bar or I wish to change its background color to match the background.

I have tried:


[data-test="App-search-bar{display:none;

But does not seem to work. Any suggestions or ideas would be highly appreciated.
2

But if you go to the options of the inline list you have an option to hide the serach bar no? Or do you want it but with another background?

image

1 Like
3

Let me try that option to check if I can disable from there.

4

you have to do it in both inline lists of the screen

5 
[data-test="app-search-bar"] {
display: none;
}

You miss a " and a ] there.

1 Like
6

This worked to hide the bar. Thanks a lot @ThinhDinh …
Now I need to change the color of the

or padding where the search bar was located

7

But unchecking the option of the search bar will work in that case no @ThinhDinh ? Why it’s necessary to use CSS?

2 Likes
8

I tried it and it worked. Thank you so much to both of you guys. @adriasoce @ThinhDinh …

We learn everyday :sunglasses:

2 Likes
9

Well I did find some cases where I design a complex landing page where I need users to make an action before showing them inline lists.

I also need those lists to be searchable but the search bar was showing regardless of the inline list being visible or not.

This is where this CSS comes into place. I have done that multiple times.

2 Likes
10

Thanks for sharing your use case. This will come in handy for me when i encounter such a situation.

1 Like
11

Oh true, i did not think about that option

12

A simple use case is I show users 2 buttons in a public app:

  • Continue as guest
  • Sign in

Then if you click continue as guest I show you some inline lists that are searchable.

I have to use CSS to hide the search bar before users make their choice. That’s the use case.

1 Like