[英]Material-UI Drawer issue
I want this drawer to stick with the page just like a sticker and be active. 我希望这个抽屉像贴纸一样贴在页面上并保持活动状态。 Everythings fine but whenever I am scrolling down, the whole drawer also moves down.
一切都很好,但是每当我向下滚动时,整个抽屉也会向下移动。 How can I fix it?
我该如何解决? I don't want this whole thing to move down while scrolling.
我不希望整个过程在滚动时向下移动。
Note: I tried to fix this thing by using docked={false}. 注意:我试图通过使用docked = {false}来解决此问题。 But using it there makes the whole page inactive except the drawer.
但是在那里使用它会使整个页面(抽屉除外)处于非活动状态。
Encountered the same problem? 遇到同样的问题? Any Solution?
有什么办法吗?
import React, { Component } from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
class MenuView extends Component {
render {
return(
<Drawer open={true} containerStyle={{marginTop: '6.5%', background:'#545454', position:'fixed'}}>
<MenuItem primaryText="My Name" style={{color:'white', marginTop:'10%'}} href="#/name" onClick={handlers.changeURL}/>
<MenuItem primaryText="My Age" style={{color:'white'}} href="#/age" onClick={handlers.changeURL}/>
<MenuItem primaryText="My Address" style={{color:'white'}} href="#/address" onClick={handlers.changeURL}/>
<MenuItem primaryText="My Files" style={{color:'white'}} href="#/files" onClick={handlers.changeURL}/>
</Drawer>
);
}
}
export default MenuView;
can you create a jsfiddle for this so that we may have a look on it. 您可以为此创建一个jsfiddle吗,以便我们来看看。 OR Try adding "Top" property of css inside containerStyle.
或者尝试在containerStyle内添加css的“ Top”属性。
<Drawer open={true} containerStyle={{top: '0%', background:'#545454', position:'fixed'}}> <MenuItem primaryText="My Name" style={{color:'white', marginTop:'10%'}} href="#/name" onClick={handlers.changeURL}/> <MenuItem primaryText="My Age" style={{color:'white'}} href="#/age" onClick={handlers.changeURL}/> <MenuItem primaryText="My Address" style={{color:'white'}} href="#/address" onClick={handlers.changeURL}/> <MenuItem primaryText="My Files" style={{color:'white'}} href="#/files" onClick={handlers.changeURL}/> </Drawer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.