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%;
}

Answer 2

Your <LeftNav> should contain two elements:

• The first one contains the items and has an overflow-y set to auto (to scroll when too long) and a javascript-set height of the navigation panel height minus the search field height (include paddings!)
• The second one is position: absolute, bottom: 0 and width: 100% and contains (or is) your #search field

Example where this.props.height is set to my window.innerHeight on window's load and resize events:

<LeftNav>
  <div style={{overflowY: 'auto', height: (this.props.height - 50) + 'px'}}>
    {menuItems}
  </div>
  <div style={{position: 'absolute', bottom: 0, width: '100%'}}>
    {{searchField}}
  </div>
</LeftNav>