Sticky menu below the app bar

Get Help
1

Hi guys,

I would much appreciate your ideas around this.

  1. We know the app bar is sticky. It stays at the top when we are scrolling down the screen.
  2. We know that below the app bar, we can edit the styles of an element and set it to “Top”, and that element will stay at the top when scrolling.

However, my issue is the following.

  • I have the app bar.
  • Below the app bar, I have two search fields. One dropdown and one input. They work together.
  • Below that, I have the lists that are affected by those search elements.

My problem is that if I set the style of the search elements to “Top”, everything works when the screen is loaded for the first time and the list shows. I can scroll, and the list will scroll under the search elements.

However, as soon as I select a filter from the dropdown or input a keyword to filter the lists, the results will start showing from the top of the app, meaning, under the search elements and below the app bar.

What am I missing? How can I make it so that in that screen, even after applying a filter, the lists will start under the search elements and not below them?

I hope I painted a clear picture.

I appreciate any help you can provide.

2

What I do is to build a transparent rectangle under the app bar (and here also your search fields) with normal style. So: Even if someone pics a list item the list can’t go higher as it is blocked by the invisible rectangle.

Hope you can follow me - if not i’m posting a screenshot of how i’m doing this.

3

Thanks, but I don’t see how that is set up.

Could you share a screenshot or gif? :pray:

4

It has happened to me several times and the solution is with rectangles. From what I’ve learned, when you paste an element without a base (rectangle) and another element is filtered or hidden, the rest of the elements are affected by the gap it leaves, maybe vertically, maybe horizontally. It will depend on how the elements are glued.

Hope this can help you.

5

Sure, I changed the background-color to red just to demonstrate where the rectangle is located. Does this help?

image
image1839×1307 167 KB

image
image1868×1274 156 KB

6

You are the man! :tada:

Thank you very much. That did the trick. :pray:

7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.