From 72efb39cfb4ec66766dcf4d73e1655ca351d75f5 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Wed, 8 Sep 2021 00:02:05 +0530
Subject: [PATCH] selected widget should always be on top

---
 frontend/src/Editor/DraggableBox.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
index 156cc1ae0e..7e5d7138bd 100644
--- a/frontend/src/Editor/DraggableBox.jsx
+++ b/frontend/src/Editor/DraggableBox.jsx
@@ -41,13 +41,14 @@ const resizerStyles = {
   },
 };
 
-function getStyles(left, top, isDragging, component) {
-  const transform = `translate3d(${left}px, ${top}px, 0)`;
+function getStyles(left, top, isDragging, component, isSelectedComponent) {
+  // const transform = `translate3d(${left}px, ${top}px, 0)`;
   return {
     position: 'absolute',
+    height: '100%',
     // transform,
     // WebkitTransform: transform,
-    zIndex: ['DropDown', 'Datepicker', 'DaterangePicker'].includes(component.component) ? 2 : 1,
+    zIndex: isSelectedComponent ? 2 : 1,
     // IE fallback: hide the real node using CSS when dragging
     // because IE will ignore our custom "empty image" drag preview.
     opacity: isDragging ? 0 : 1,
@@ -176,8 +177,7 @@ export const DraggableBox = function DraggableBox({
     <div className={inCanvas ? '' : 'col-md-4 text-center align-items-center clearfix mb-2'}>
       {inCanvas ? (
         <div
-          style={getStyles(left, top, isDragging, component)}
-          style={{ height: '100%' }}
+          style={getStyles(left, top, isDragging, component, isSelectedComponent)}
           className="draggable-box "
           onMouseOver={() => setMouseOver(true)}
           onMouseLeave={() => setMouseOver(false)}