diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index 0a01ef7015..77d896b054 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -44,8 +44,6 @@ class DirentListItem extends React.Component {
     this.state = {
       isOperationShow: false,
       highlight: false,
-      isItemMenuShow: false,
-      menuPosition: {top: 0, left: 0 },
       progress: 0,
       isProgressDialogShow: false,
       isMoveDialogShow: false,
@@ -57,14 +55,6 @@ class DirentListItem extends React.Component {
     this.zipToken = null;
   }
 
-  componentDidMount() {
-    document.addEventListener('click', this.onItemMenuHide);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.onItemMenuHide);
-  }
-
   //UI Interactive
   onMouseEnter = () => {
     if (!this.props.isItemFreezed) {
@@ -93,34 +83,10 @@ class DirentListItem extends React.Component {
     }
   }
 
-  onItemMenuToggle = (e) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-
-    if (!this.state.isItemMenuShow) {
-      this.onItemMenuShow(e);
-    } else {
-      this.onItemMenuHide();
-    }
-  }
-
-  onItemMenuShow = (e) => {
-    let left = e.clientX;
-    let top  = e.clientY;
-    let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
-    this.setState({
-      menuPosition: position,
-      isItemMenuShow: true,
-    });
-    this.props.onFreezedItem();
-  }
-
-  onItemMenuHide = () => {
+  onUnfreezedItem = () => {
     this.setState({
+      highlight: false,
       isOperationShow: false,
-      highlight: '',
-      isItemMenuShow: false,
-      isRenameing: false,
     });
     this.props.onUnfreezedItem();
   }
@@ -211,7 +177,6 @@ class DirentListItem extends React.Component {
     this.props.onItemRenameToggle(this.props.dirent);
     this.setState({
       isOperationShow: false,
-      isItemMenuShow: false,
       isRenameing: true,
     });
   }
@@ -239,20 +204,16 @@ class DirentListItem extends React.Component {
   }
 
   onRenameCancel = () => {
-    this.setState({
-      isRenameing: false,
-    });
+    this.setState({isRenameing: false});
     this.props.onUnfreezedItem();
   }
 
   onItemMoveToggle = () => {
     this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
-    this.onItemMenuHide();
   }
 
   onItemCopyToggle = () => {
     this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
-    this.onItemMenuHide();
   }
 
   onPermissionItem = () => {
@@ -261,7 +222,6 @@ class DirentListItem extends React.Component {
 
   onDetailsItem = () => {
     this.props.onItemDetails(this.props.dirent);
-    this.onItemMenuHide();
   }
 
   onLockItem = () => {
@@ -271,7 +231,6 @@ class DirentListItem extends React.Component {
       this.props.updateDirent(this.props.dirent, 'is_locked', true);
       this.props.updateDirent(this.props.dirent, 'locked_by_me', true);
     });
-    this.onItemMenuHide();
   }
 
   onUnlockItem = () => {
@@ -281,7 +240,6 @@ class DirentListItem extends React.Component {
       this.props.updateDirent(this.props.dirent, 'is_locked', false);
       this.props.updateDirent(this.props.dirent, 'locked_by_me', false);
     });
-    this.onItemMenuHide();
   }
 
   onNewDraft = () => {
@@ -305,7 +263,6 @@ class DirentListItem extends React.Component {
         toaster.danger(errMessage);
       }
     });
-    this.onItemMenuHide();
   }
 
   onComnentItem = () => {
@@ -318,7 +275,6 @@ class DirentListItem extends React.Component {
     let referer = location.href;
     let url = URLDecorator.getUrl({type: 'file_revisions', repoID: repoID, filePath: filePath, referer: referer});
     location.href = url;
-    this.onItemMenuHide();
   }
 
   onAccessLog = () => {
@@ -330,7 +286,6 @@ class DirentListItem extends React.Component {
     let filePath = this.getDirentPath(this.props.dirent);
     let url = URLDecorator.getUrl({type: 'open_via_client', repoID: repoID, filePath: filePath});
     location.href = url;
-    this.onItemMenuHide();
   }
 
   onItemDownload = (e) => {
@@ -373,7 +328,6 @@ class DirentListItem extends React.Component {
           _this.setState({isProgressDialogShow: false});
         }, 500);
       }
-
     });
   }
 
@@ -437,7 +391,7 @@ class DirentListItem extends React.Component {
                 <img src={`${siteRoot}${dirent.encoded_thumbnail_src}`} className="thumbnail" alt="" /> :
                 <img src={iconUrl} width="24" alt='' />
               }
-              {dirent.is_locked && <img className="locked" src={siteRoot + mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} />}
+              {dirent.is_locked && <img className="locked" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} />}
             </div>
           </td>
           <td className="name">
@@ -478,19 +432,16 @@ class DirentListItem extends React.Component {
                     <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
                   </li>
                   <li className="operation-group-item">
-                    <i className="sf2-icon-caret-down sf-dropdown-toggle" title={gettext('More Operations')} onClick={this.onItemMenuToggle}></i>
+                    <DirentMenu
+                      dirent={this.props.dirent}
+                      onMenuItemClick={this.onMenuItemClick}
+                      currentRepoInfo={this.props.currentRepoInfo}
+                      isRepoOwner={this.props.isRepoOwner}
+                      onFreezedItem={this.props.onFreezedItem}
+                      onUnfreezedItem={this.onUnfreezedItem}
+                    />
                   </li>
                 </ul>
-                {
-                  this.state.isItemMenuShow &&
-                  <DirentMenu
-                    dirent={this.props.dirent}
-                    menuPosition={this.state.menuPosition}
-                    onMenuItemClick={this.onMenuItemClick}
-                    currentRepoInfo={this.props.currentRepoInfo}
-                    isRepoOwner={this.props.isRepoOwner}
-                  />
-                }
               </div>
             }
           </td>
diff --git a/frontend/src/components/dirent-list-view/dirent-menu-item.js b/frontend/src/components/dirent-list-view/dirent-menu-item.js
deleted file mode 100644
index 744bf026e8..0000000000
--- a/frontend/src/components/dirent-list-view/dirent-menu-item.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-
-const propTypes = {
-  item: PropTypes.string.isRequired,
-  onItemClick: PropTypes.func.isRequired,
-};
-
-class DirentMenuItem extends React.Component {
-
-  onClick = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    let operation = e.target.dataset.type;
-    this.props.onItemClick(operation);
-  }
-
-  translateOperation = (operation) => {
-    let translateOperation = '';
-    switch(operation) {
-      case 'Rename':
-        translateOperation = gettext('Rename');
-        break;
-      case 'Move':
-        translateOperation = gettext('Move');
-        break;
-      case 'Copy':
-        translateOperation = gettext('Copy');
-        break;
-      case 'Permission':
-        translateOperation = gettext('Permission');
-        break;
-      case 'Details':
-        translateOperation = gettext('Details');
-        break;
-      case 'Unlock':
-        translateOperation = gettext('Unlock');
-        break;
-      case 'Lock':
-        translateOperation = gettext('Lock');
-        break;
-      case 'New Draft':
-        translateOperation = gettext('New Draft');
-        break;
-      case 'Comment':
-        translateOperation = gettext('Comment');
-        break;
-      case 'History':
-        translateOperation = gettext('History');
-        break;
-      case 'Access Log':
-        translateOperation = gettext('Access Log');
-        break;
-      case 'Open via Client':
-        translateOperation = gettext('Open via Client');
-        break;
-      default:
-        break;
-    }
-    return translateOperation;
-  }
-
-  render() {
-    let operation = this.props.item;
-    let operationMessage = this.translateOperation(operation);
-    return (
-      <Fragment>
-        {
-          operation !== 'Divider' ?
-            <li className="dropdown-item operation-menu-item" data-type={operation} onClick={this.onClick}>
-              <span className="user-select-none" data-type={operation} title={operationMessage} aria-label={operationMessage}>{operationMessage}</span>
-            </li> :
-            <li className="dropdown-divider"></li>
-        }
-      </Fragment>
-    );
-  }
-}
-
-DirentMenuItem.propTypes = propTypes;
-
-export default DirentMenuItem;
diff --git a/frontend/src/components/dirent-list-view/dirent-menu.js b/frontend/src/components/dirent-list-view/dirent-menu.js
index c90cbb8d3f..56cbe4c70e 100644
--- a/frontend/src/components/dirent-list-view/dirent-menu.js
+++ b/frontend/src/components/dirent-list-view/dirent-menu.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isPro, enableFileComment, fileAuditEnabled, folderPermEnabled} from '../../utils/constants';
-import DirentMenuItem from './dirent-menu-item';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { gettext, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
-  dirent: PropTypes.object.isRequired,
-  menuPosition: PropTypes.object.isRequired, 
-  onMenuItemClick: PropTypes.func.isRequired,
   currentRepoInfo: PropTypes.object.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
+  onMenuItemClick: PropTypes.func.isRequired,
+  onFreezedItem: PropTypes.func.isRequired,
+  onUnfreezedItem: PropTypes.func.isRequired,
 };
 
 class DirentMenu extends React.Component {
@@ -17,26 +17,21 @@ class DirentMenu extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      menuList: [],
+      isItemMenuShow: false
     };
+    this.menuList = [];
   }
 
   componentDidMount() {
-    let repoInfo = this.props.currentRepoInfo;
-    let menuList = this.calculateMenuList(repoInfo);
-    this.setState({
-      menuList: menuList,
-      menuHeight: menuList.length * 30,
-    });
-
+    this.menuList = this.calculateMenuList();
   }
 
-  calculateMenuList(repoInfo) {
-    let dirent = this.props.dirent;
-    let isRepoOwner = this.props.isRepoOwner;
+  calculateMenuList() {
+    let { currentRepoInfo, dirent, isRepoOwner } = this.props;
+
     let type = dirent.type;
     let permission = dirent.permission;
-    let can_set_folder_perm = folderPermEnabled  && ((isRepoOwner && repoInfo.has_been_shared_out) || repoInfo.is_admin);
+    let can_set_folder_perm = folderPermEnabled  && ((isRepoOwner && currentRepoInfo.has_been_shared_out) || currentRepoInfo.is_admin);
     if (type === 'dir' && permission === 'rw') {
       let menuList = [];
       if (can_set_folder_perm) {
@@ -48,7 +43,7 @@ class DirentMenu extends React.Component {
     }
 
     if (type === 'dir' && permission === 'r') {
-      let menuList = repoInfo.encrypted ? ['Copy', 'Details'] : ['Details'];
+      let menuList = currentRepoInfo.encrypted ? ['Copy', 'Details'] : ['Details'];
       return menuList;
     }
 
@@ -85,7 +80,7 @@ class DirentMenu extends React.Component {
 
     if (type === 'file' && permission === 'r') {
       let menuList = [];
-      if (!repoInfo.encrypted) {
+      if (!currentRepoInfo.encrypted) {
         menuList.push('Copy');
       }
       if (enableFileComment) {
@@ -97,32 +92,101 @@ class DirentMenu extends React.Component {
     }
   }
 
-  onMenuItemClick = (operation) => {
+  translateMenuItem = (menuItem) => {
+    let translateResult = '';
+    switch(menuItem) {
+      case 'Rename':
+        translateResult = gettext('Rename');
+        break;
+      case 'Move':
+        translateResult = gettext('Move');
+        break;
+      case 'Copy':
+        translateResult = gettext('Copy');
+        break;
+      case 'Permission':
+        translateResult = gettext('Permission');
+        break;
+      case 'Details':
+        translateResult = gettext('Details');
+        break;
+      case 'Unlock':
+        translateResult = gettext('Unlock');
+        break;
+      case 'Lock':
+        translateResult = gettext('Lock');
+        break;
+      case 'New Draft':
+        translateResult = gettext('New Draft');
+        break;
+      case 'Comment':
+        translateResult = gettext('Comment');
+        break;
+      case 'History':
+        translateResult = gettext('History');
+        break;
+      case 'Access Log':
+        translateResult = gettext('Access Log');
+        break;
+      case 'Open via Client':
+        translateResult = gettext('Open via Client');
+        break;
+      default:
+        break;
+    }
+    return translateResult;
+  }
+
+  onDropdownToggleClick = (e) => {
+    e.preventDefault();
+    this.toggleOperationMenu();
+  }
+
+  toggleOperationMenu = () => {
+    this.setState(
+      {isItemMenuShow: !this.state.isItemMenuShow},
+      () => {
+        if (this.state.isItemMenuShow) {
+          this.props.onFreezedItem();
+        } else {
+          this.props.onUnfreezedItem();
+        }
+      }
+    );
+  }
+
+  onMenuItemClick = (event) => {
+    let operation = event.target.dataset.toggle;
     this.props.onMenuItemClick(operation);
   }
 
-  render() {
-    if (this.state.menuList.length) {
-      let position = this.props.menuPosition;
-      let left = position.left - (8 * 16); // 8rem width;
-      let top = position.top + (1 * 16); 
-      let style = {position: 'fixed', left: left, top: top, display: 'block'};
-      let screenH = window.innerHeight;
-      if (screenH - position.top < this.state.menuHeight) {
-        top = position.top - this.state.menuHeight;
-        style = {position: 'fixed', left: left, top: top, display: 'block'};
-      }
-      return (
-        <ul className="dropdown-menu operation-menu" style={style}>
-          {this.state.menuList.map((item, index) => {
-            return (
-              <DirentMenuItem key={index} item={item} onItemClick={this.onMenuItemClick}/>
-            );
-          })}
-        </ul>
-      );
+  render() { 
+    if (!this.menuList.length) {
+      return '';
     }
-    return '';
+    return (
+      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
+        <DropdownToggle
+          tag="i" 
+          className="sf-dropdown-toggle sf2-icon-caret-down" 
+          title={gettext('More Operations')}
+          data-toggle="dropdown" 
+          aria-expanded={this.state.isItemMenuShow}
+          onClick={this.onDropdownToggleClick}
+        />
+        <DropdownMenu>
+          {this.menuList.map((menuItem, index) => {
+            if (menuItem === 'Divider') {
+              return <DropdownItem key={index} divider/>;
+            } else {
+              return (
+                <DropdownItem key={index} data-toggle={menuItem} onClick={this.onMenuItemClick}>{this.translateMenuItem(menuItem)}</DropdownItem>
+              );
+            }
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    );
   }
 }
 
diff --git a/frontend/src/css/wiki.css b/frontend/src/css/wiki.css
index 1a6d315d86..098ed57587 100644
--- a/frontend/src/css/wiki.css
+++ b/frontend/src/css/wiki.css
@@ -63,7 +63,6 @@ img[src=""] {
 .cur-view-content {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
 }
 
 .cur-view-content .wiki-page-container{
diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js
index 020a154a9a..6a2e8996d8 100644
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -150,6 +150,7 @@ class MainPanel extends Component {
   }
 
   render() {
+
     const ErrMessage = (<div className="message empty-tip err-message"><h2>{gettext('Folder does not exist.')}</h2></div>);
     
     return (
@@ -199,11 +200,11 @@ class MainPanel extends Component {
                 />
               )}
             </div>
-            <div className="cur-view-content" onScroll={this.handlePageScroll} ref="curViewContent">
+            <div className="cur-view-content">
               {!this.props.pathExist ?
                 ErrMessage :
                 <Fragment>
-                  { this.props.isViewFile ?
+                  {this.props.isViewFile ?
                     <WikiMarkdownViewer
                       isFileLoading={this.props.isFileLoading}
                       markdownContent={this.props.content}