diff --git a/web/pgadmin/feature_tests/view_data_dml_queries.py b/web/pgadmin/feature_tests/view_data_dml_queries.py
index 6019161..0d1a1dc 100644
--- a/web/pgadmin/feature_tests/view_data_dml_queries.py
+++ b/web/pgadmin/feature_tests/view_data_dml_queries.py
@@ -176,15 +176,13 @@ CREATE TABLE public.defaults
                 ActionChains(self.driver).send_keys(value).perform()
 
         elif cell_type in ['text', 'json']:
-            self.page.find_by_css_selector(
-                "div[style*='z-index: 1000'] textarea"
-            ).click()
+            self.page.find_by_xpath(
+                "//*[contains(@class, 'pg_textarea')]").click()
             ActionChains(self.driver).send_keys(value).perform()
-            save_btn_xpath = "div[style*='z-index: 1000'] " \
-                             "div button:first-child"
-            self.page.find_by_css_selector(
-                save_btn_xpath
-            ).click()  # Click on editor's Save button
+
+            # Click on editor's Save button
+            self.page.find_by_xpath("//*[contains(@class, 'pg_text_editor')]"
+                                    "//button[contains(@class, 'fa-save')]").click()
         else:
             if data[1] == 'true':
                 checkbox_el = cell_el.find_element_by_xpath(".//input")
diff --git a/web/pgadmin/static/css/pgadmin.style.css b/web/pgadmin/static/css/pgadmin.style.css
index db1f3f5..a983e24 100644
--- a/web/pgadmin/static/css/pgadmin.style.css
+++ b/web/pgadmin/static/css/pgadmin.style.css
@@ -57,19 +57,19 @@
   font-weight: bold; }
 
 .text-14 {
-  font-family: "Helvetica Neue";
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px; }
 
 .text-13 {
-  font-family: "Helvetica Neue";
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px; }
 
 .text-12 {
-  font-family: "Helvetica Neue";
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px; }
 
 .text-11 {
-  font-family: "Helvetica Neue";
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 11px; }
 
 .bg-primary-blue {
diff --git a/web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js b/web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js
index af8141f..f2dabe0 100644
--- a/web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js
+++ b/web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js
@@ -22,6 +22,32 @@
     }
   });
 
+  // return wrapper element
+  function getWrapper() {
+    return $("<div class='pg_text_editor' />");
+  }
+
+  // return textarea element
+  function getTextArea() {
+    return $("<textarea class='pg_textarea text-12' hidefocus rows=5'>");
+  }
+
+  // Generate and return editor buttons
+  function getButtons(editable) {
+    var $buttons = $("<div class='pg_buttons' />"),
+      label = editable ? 'Cancel': 'OK';
+      button_type = editable ? 'btn-danger' : 'btn-primary';
+
+    if (editable) {
+      var $save_button = $("<button class='btn btn-primary fa fa-lg fa-save long_text_editor pg-alertify-button'>Save</button>")
+          .appendTo($buttons);
+    }
+
+    $cancel_button = $("<button class='btn " + button_type + " fa fa-lg fa-times long_text_editor pg-alertify-button'>"+ label +"</button>")
+        .appendTo($buttons);
+    return $buttons;
+  }
+
   /*
    * This function handles the [default] and [null] values for cells
    * if row is copied, otherwise returns the editor value.
@@ -65,6 +91,31 @@
     }
   }
 
+  function calculateEditorPosition(position, $wrapper) {
+    var $edit_grid = $wrapper.parent().find('#datagrid');
+    var _elem_height = $edit_grid.height(),
+      is_hidden, _position;
+    // We cannot display editor partially visible so we will lift it above select column
+    if(position.top > _elem_height) {
+      is_hidden = position.bottom - _elem_height;
+    }
+
+    if(is_hidden) {
+      _position = position.top - is_hidden;
+    } else {
+      _position = position.top-7;
+    }
+    position.top = _position;
+
+    var grid_width = $edit_grid.width(),
+      popup_width = $wrapper.width() + 32;
+    popup_width += position.left;
+
+    if(popup_width > grid_width) {
+      position.left -= (popup_width - grid_width);
+    }
+    return position;
+  }
 
   // Text data type editor
   function pgTextEditor(args) {
@@ -75,18 +126,12 @@
     this.init = function () {
       var $container = $("body");
 
-      $wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
-          .appendTo($container);
-
-      $input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0'>")
-          .appendTo($wrapper);
+      $wrapper = getWrapper().appendTo($container);
+      $input = getTextArea().appendTo($wrapper);
+      $buttons = getButtons(true).appendTo($wrapper);
 
-      $("<DIV style='text-align:right'><BUTTON class='btn btn-primary fa fa-lg fa-save long_text_editor pg-alertify-button'>Save</BUTTON>"
-         + "<BUTTON class='btn btn-danger fa fa-lg fa-times long_text_editor pg-alertify-button'>Cancel</BUTTON></DIV>")
-          .appendTo($wrapper);
-
-      $wrapper.find("button:first").bind("click", this.save);
-      $wrapper.find("button:last").bind("click", this.cancel);
+      $buttons.find("button:first").on("click", this.save);
+      $buttons.find("button:last").on("click", this.cancel);
       $input.bind("keydown", this.handleKeyDown);
 
       scope.position(args.position);
@@ -126,23 +171,11 @@
     };
 
     this.position = function (position) {
-      var _elem_height = $wrapper.parent().find('#datagrid').height(),
-      is_hidden, _position;
-      // We cannot display editor partially visible so we will lift it above select column
-      if(position.top > _elem_height) {
-        is_hidden = position.bottom - _elem_height;
-      }
-
-      if(is_hidden) {
-        _position = position.top - is_hidden;
-      } else {
-        _position = position.top - 5;
-      }
-
+      calculateEditorPosition(position, $wrapper);
       $wrapper
-          .css("top", _position)
-          .css("left", position.left - 5)
-    };
+        .css("top", position.top)
+        .css("left", position.left)
+    }
 
     this.destroy = function () {
       $wrapper.remove();
@@ -230,18 +263,12 @@
     this.init = function () {
       var $container = $("body");
 
-      $wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
-          .appendTo($container);
-
-      $input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0'>")
-          .appendTo($wrapper);
+      $wrapper = getWrapper().appendTo($container);
+      $input = getTextArea().appendTo($wrapper);
+      $buttons = getButtons(true).appendTo($wrapper);
 
-      $("<DIV style='text-align:right'><BUTTON class='btn btn-primary fa fa-lg fa-save long_text_editor pg-alertify-button'>Save</BUTTON>"
-         + "<BUTTON class='btn btn-danger fa fa-lg fa-times long_text_editor pg-alertify-button'>Cancel</BUTTON></DIV>")
-          .appendTo($wrapper);
-
-      $wrapper.find("button:first").bind("click", this.save);
-      $wrapper.find("button:last").bind("click", this.cancel);
+      $buttons.find("button:first").on("click", this.save);
+      $buttons.find("button:last").on("click", this.cancel);
       $input.bind("keydown", this.handleKeyDown);
 
       scope.position(args.position);
@@ -281,23 +308,11 @@
     };
 
     this.position = function (position) {
-      var _elem_height = $wrapper.parent().find('#datagrid').height(),
-      is_hidden, _position;
-      // We cannot display editor partially visible so we will lift it above select column
-      if(position.top > _elem_height) {
-        is_hidden = position.bottom - _elem_height;
-      }
-
-      if(is_hidden) {
-        _position = position.top - is_hidden;
-      } else {
-        _position = position.top - 5;
-      }
-
+      calculateEditorPosition(position, $wrapper);
       $wrapper
-          .css("top", position.top - 5)
-          .css("left", position.left - 5)
-    };
+        .css("top", position.top)
+        .css("left", position.left)
+    }
 
     this.destroy = function () {
       $wrapper.remove();
@@ -371,16 +386,11 @@
     this.init = function () {
       var $container = $("body");
 
-      $wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
-          .appendTo($container);
-
-      $input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0' readonly>")
-          .appendTo($wrapper);
-
-      $("<DIV style='text-align:right'><BUTTON class='btn btn-primary fa fa-lg fa-times long_text_editor pg-alertify-button'>Close</BUTTON></DIV>")
-       .appendTo($wrapper);
+      $wrapper = getWrapper().appendTo($container);
+      $input = getTextArea().appendTo($wrapper);
+      $buttons = getButtons(false).appendTo($wrapper);
 
-      $wrapper.find("button:first").bind("click", this.cancel);
+      $buttons.find("button:first").on("click", this.cancel);
       $input.bind("keydown", this.handleKeyDown);
 
       scope.position(args.position);
@@ -418,23 +428,11 @@
     };
 
     this.position = function (position) {
-      var _elem_height = $wrapper.parent().find('#datagrid').height(),
-        is_hidden, _position;
-      // We cannot display editor partially visible so we will lift it above select column
-      if(position.top > _elem_height) {
-        is_hidden = position.bottom - _elem_height;
-      }
-
-      if(is_hidden) {
-        _position = position.top - is_hidden;
-      } else {
-        _position = position.top - 5;
-      }
-
+      calculateEditorPosition(position, $wrapper);
       $wrapper
-          .css("top", _position)
-          .css("left", position.left - 5)
-    };
+        .css("top", position.top)
+        .css("left", position.left)
+    }
 
     this.destroy = function () {
       $wrapper.remove();
@@ -593,16 +591,11 @@
     this.init = function () {
       var $container = $("body");
 
-      $wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
-          .appendTo($container);
+      $wrapper = getWrapper().appendTo($container);
+      $input = getTextArea().appendTo($wrapper);
+      $buttons = getButtons(false).appendTo($wrapper);
 
-      $input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0' readonly>")
-          .appendTo($wrapper);
-
-      $("<DIV style='text-align:right'><BUTTON class='btn btn-primary fa fa-lg fa-times long_text_editor pg-alertify-button'>Close</BUTTON></DIV>")
-       .appendTo($wrapper);
-
-      $wrapper.find("button:first").bind("click", this.cancel);
+      $buttons.find("button:first").on("click", this.cancel);
       $input.bind("keydown", this.handleKeyDown);
 
       scope.position(args.position);
@@ -640,23 +633,11 @@
     };
 
     this.position = function (position) {
-      var _elem_height = $wrapper.parent().find('#datagrid').height(),
-        is_hidden, _position;
-      // We cannot display editor partially visible so we will lift it above select column
-      if(position.top > _elem_height) {
-        is_hidden = position.bottom - _elem_height;
-      }
-
-      if(is_hidden) {
-        _position = position.top - is_hidden;
-      } else {
-        _position = position.top - 5;
-      }
-
+      calculateEditorPosition(position, $wrapper);
       $wrapper
-          .css("top", _position)
-          .css("left", position.left - 5)
-    };
+        .css("top", position.top)
+        .css("left", position.left)
+    }
 
     this.destroy = function () {
       $wrapper.remove();
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 4f386f1..7266b34 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -487,4 +487,25 @@ input.editor-checkbox:focus {
 .slick-cell, .slick-headerrow-column {
   border-right: 1px solid #ccc;
   z-index: 0;
+}
+
+/* Style for text editor */
+.pg_text_editor {
+  z-index:10000;
+  position:absolute;
+  background: #fff;
+  padding: 7px 5px 5px 1px;
+  border:2px solid #888;
+  -moz-border-radius:10px;
+  border-radius:10px;
+}
+.pg_textarea {
+  backround:#fff;
+  width:250px;
+  height:80px;
+  border:0;
+  outline:0;
+}
+.pg_buttons {
+  text-align:right;
 }
\ No newline at end of file
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 33eec9a..b9f017e 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -196,7 +196,7 @@ define([
           height:'100%',
           isCloseable: false,
           isPrivate: true,
-          content: '<div id ="datagrid" class="sql-editor-grid-container"></div>'
+          content: '<div id ="datagrid" class="sql-editor-grid-container text-12"></div>'
         })
 
         var explain = new pgAdmin.Browser.Panel({
@@ -587,7 +587,9 @@ define([
               options['editor'] = is_editable ? Slick.Editors.JsonText
                                               : Slick.Editors.ReadOnlyJsonText;
               options['formatter'] = Slick.Formatters.JsonString;
-            } else if(c.cell == 'number') {
+            } else if(c.cell == 'number' ||
+              $.inArray(c.type, ['oid', 'xid', 'real']) !== -1
+            ) {
               options['editor'] = is_editable ? Slick.Editors.CustomNumber
                                               : Slick.Editors.ReadOnlyText;
               options['formatter'] = Slick.Formatters.Numbers;
@@ -597,7 +599,7 @@ define([
               options['formatter'] = Slick.Formatters.Checkmark;
             } else {
               options['editor'] = is_editable ? Slick.Editors.pgText
-                                              : Slick.Editors.ReadOnlypgText;
+                                                : Slick.Editors.ReadOnlypgText;
               options['formatter'] = Slick.Formatters.Text;
             }