How to create a sticky footer inside the LeftNav?

Question

I'm trying to create a sticky footer inside the <LeftNav> component, so far unsuccessfully. This is what is needs to look like:

I have tried using position: fixed; bottom: 0 and position: absolute; bottom: 0 on the wrapper of the search field, but when the user scrolls the list items the search field travels up. Like this:

Any idea how to fix this?

Answer 1

Position: fixed should work. Without more information about how you have your page setup, it's hard to be more specific. Take a look at this fiddle and see if that helps:

https://jsfiddle.net/kevinlrak/r1mpf1n8/

#search {
  position: fixed;
  background-color: red;
  bottom: 0;
  width: 25%;
}