submenus overlapping

4 files changed, 13 insertions, 4 deletions

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index bcf856d48..265cdefca 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -16,7 +16,7 @@
 
 .contextMenu-item {
     width: 10vw; //10vw
-    height: auto; //4vh
+    height: 2vh;
     background: #DDDDDD;
     display: flex;
     justify-content: left;
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 31c165373..73bad477b 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -3,6 +3,11 @@ import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react"
 import "./ContextMenu.scss"
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+
+library.add(faSearch);
 
 @observer
 export class ContextMenu extends React.Component {
@@ -67,7 +72,11 @@ export class ContextMenu extends React.Component {
     render() {
         return (
             <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
-                <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
+                <div>
+                    <i className="fa fa-search"> </i>
+                    {/* <FontAwesomeIcon icon="search" size="sm" /> */}
+                    <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
+                </div>
                 {this._items.filter(prop => {
                     return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
                 }).map(prop => {
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 67bbc3082..6bd370152 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -38,7 +38,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> {
         else {
             let submenu = null;
             if (this.overItem) {
-                submenu = (<div className="subMenu-cont" style={{ left: this._pageX, top: this._pageY, marginLeft: "47.5%" }}>
+                submenu = (<div className="subMenu-cont" style={{ top: this._pageY, marginLeft: "0" }}>
                     {this._items.map(prop => {
                         return <ContextMenuItem {...prop} key={prop.description} />
                     })}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index dfc7e9096..e402392a7 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -126,7 +126,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     specificContextMenu = (e: React.MouseEvent): void => {
         ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability });
         ContextMenu.Instance.addItem({
-            description: "Submenu", subitems: [
+            description: "Sub", subitems: [
                 { description: "Subitem 1", event: this.textCapability },
                 { description: "Subitem 2", event: this.textCapability },
                 { description: "Subitem 3", event: this.textCapability },