[Drawer] position: fixed doesn't work as intended

[volkanunsal]

I have been trying to use position: fixed to make a div stick to the bottom of the LeftNav with the and I cannot figure it out. I created a StackOverflow question, but I don't think it's a how-to question. Something with respect to how material-ui is doing scrolling is breaking the position of the div. Can anyone see what might be wrong?

This is my markup:

<LeftNav
  docked={false}
  width={300}
  open={this.props.open}
  onRequestChange={open => this.props.dispatch(updateProfile({open})) }>

  //... lots of ListItems

  <div style={{position: 'fixed', bottom: 0, backgroundColor: 'white'}}>
    hello world
  </div>
</LeftNav>;

This is what it needs to look like:

This is what it looks like:

[ccomb]

This is related to the transform3d css directive applied to the LeftNav
http://stackoverflow.com/questions/14732403/position-fixed-not-working-for-header

[volkanunsal]

Also happens in Firefox.

[renato]

Did you guys find any workaround?

[ghost]

I've encountered a similar issue when using Drawer, it is caused by the style property transform set in Drawer:
code from material-ui:

const styles = {
      root: {
        height: '100%',
        width: this.props.width || theme.width,
        position: 'fixed',
        zIndex: muiTheme.zIndex.navDrawer,
        left: 0,
        top: 0,
        transform: `translate3d(${x}px, 0, 0)`,
        transition: !this.state.swiping && transitions.easeOut(null, 'transform', null),
        backgroundColor: theme.color,
        overflow: 'auto',
        WebkitOverflowScrolling: 'touch', // iOS momentum scrolling
      },

      ...

for an explanation into the problem, a good reference is here:
https://bugs.chromium.org/p/chromium/issues/detail?id=20574.

my solution is:

<Drawer
    containerStyle={{transform: 'none'}}
/>

Environment:
React version 0.15.0
material-ui version 0.15.1
Chrome version 51.0.2704.103 (64-bit)
OSX version 10.11.5

Hope it helps :)

[aahan96]

Looks like the solution has been posted. Closing this issue

[acao]

I would re-open this, as the solution above causes the drawer to no longer animate - including opening or closing. it just stays open. even when i set open={false} directly.

[EugeneZ]

@acao The transform property powers the positioning and animation of Drawer. The only reasonable solution I've found is to only set transform: 'none' when the open prop is set to true and I'm sure the opening animation has finished. This is hard to do since the timing is done in CSS via the transition property. You can override this property, too, so that you control the timing, but MUI chooses the value of this property using a tree of possibilities based on whether the user is swiping and props you've passed, and replicating all this functionality might be overkill. Pick your poison.

[liesislukas]

I've done some playing with this, while i have the same issue - fixed position is not working inside drawer because of translate3d. When drawer is animating it has to use translateX / 3d options. But when the animation is done and drawer is open it has translate3d(0,0,0) if i remove this, fixed position is working fine.

Would it be possible to check if x === 0 - skip this property altogether. Before starting animation - add it and animate with it?

For now, i just put my fixed components out of drawer and use position: fixed & zindex higher then drawer's (1300)

<div>
<div style={{position: 'fixed', right: 0, bottom: 0, zIndex: 3000}}>
... fixed sutff ....         
</div>
<Drawer .....
</div>

Haven't checked that but i guess Drawer is stealing focus from any input inside outer fixed input . I was not able to focus but onFocus is fired. So added this:

<TextField
  onFocus={(e) => {
     // probably a Drawer is trying to steal focus
     e.nativeEvent.stopImmediatePropagation();
   }}
/>

Tried e.stopPropagation() but it doesn't work.