5

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

enter image description here

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:

enter image description here

Any idea how to fix this?

picardo
  • 24,530
  • 33
  • 104
  • 151

2 Answers2

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%;
}
Kevin Rak
  • 336
  • 2
  • 14
1

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>
Antoine
  • 5,504
  • 5
  • 33
  • 54
  • How would you determine the height of the search field dynamically instead of hard coding it to 50? – philcruz Oct 29 '16 at 16:55