fix: border of radio button & checkbox is not proper

Author: prafull-opensignlabs

apps/OpenSign/src/components/pdf/Placeholder.js

@@ -114,6 +114,10 @@ function Placeholder(props) {
         props.pos?.options?.validation?.format
       )
   );
+  const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
+    width: null,
+    height: null
+  });
   const dateFormatArr = [
     "L",
     "DD-MM-YYYY",
@@ -125,6 +129,21 @@ function Placeholder(props) {
     "DD MMM, YYYY",
     "DD MMMM, YYYY"
   ];
+
+  useEffect(() => {
+    const updateWidth = () => {
+      const rndElement = document.getElementById(props.pos.key);
+      if (rndElement) {
+        const { width, height } = rndElement.getBoundingClientRect();
+        setGetCheckboxRenderWidth({ width: width, height: height });
+      }
+    };
+
+    // Delay to ensure rendering is complete
+    const timer = setTimeout(updateWidth, 0);
+
+    return () => clearTimeout(timer);
+  }, [props.pos]);
   //function change format array list with selected date and format
   const changeDateFormat = () => {
     const updateDate = [];
@@ -330,8 +349,8 @@ function Placeholder(props) {
                   className="fa-solid fa-gear settingIcon"
                   style={{
                     color: "#188ae2",
-                    right: "9px",
-                    top: "-28px"
+                    right: "29px",
+                    top: "-19px"
                   }}
                 ></i>
               ) : (
@@ -351,19 +370,7 @@ function Placeholder(props) {
                       handleOnClickSettingIcon();
                     }}
                     className="fa-solid fa-gear settingIcon"
-                    style={{
-                      color: "#188ae2",
-                      right: ["checkbox", radioButtonWidget].includes(
-                        props.pos.type
-                      )
-                        ? "24px"
-                        : "47px",
-                      top: ["checkbox", radioButtonWidget].includes(
-                        props.pos.type
-                      )
-                        ? "-28px"
-                        : "-19px"
-                    }}
+                    style={{ color: "#188ae2", right: "47px", top: "-19px" }}
                   ></i>
                 )
               )}
@@ -382,19 +389,7 @@ function Placeholder(props) {
                     props.handleLinkUser(props.data.Id);
                     props.setUniqueId(props.data.Id);
                   }}
-                  style={{
-                    color: "#188ae2",
-                    right:
-                      props.pos.type === "checkbox" ||
-                      props.pos.type === radioButtonWidget
-                        ? "8px"
-                        : "32px",
-                    top:
-                      props.pos.type === "checkbox" ||
-                      props.pos.type === radioButtonWidget
-                        ? "-28px"
-                        : "-18px"
-                  }}
+                  style={{ color: "#188ae2", right: "32px", top: "-18px" }}
                 ></i>
               )}
             </>
@@ -472,19 +467,7 @@ function Placeholder(props) {
             className="fa-regular fa-copy signCopy"
             onClick={(e) => handleCopyPlaceholder(e)}
             onTouchEnd={(e) => handleCopyPlaceholder(e)}
-            style={{
-              color: "#188ae2",
-              right:
-                props.pos.type === "checkbox" ||
-                props.pos.type === radioButtonWidget
-                  ? "-9px"
-                  : "12px",
-              top:
-                props.pos.type === "checkbox" ||
-                props.pos.type === radioButtonWidget
-                  ? "-28px"
-                  : "-18px"
-            }}
+            style={{ color: "#188ae2", right: "12px", top: "-18px" }}
           ></i>
           <i
             className="fa-regular fa-circle-xmark signCloseBtn"
@@ -507,19 +490,7 @@ function Placeholder(props) {
                 props.setIsStamp(false);
               }
             }}
-            style={{
-              color: "#188ae2",
-              right:
-                props.pos.type === "checkbox" ||
-                props.pos.type === radioButtonWidget
-                  ? "-27px"
-                  : "-8px",
-              top:
-                props.pos.type === "checkbox" ||
-                props.pos.type === radioButtonWidget
-                  ? "-28px"
-                  : "-18px"
-            }}
+            style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
           ></i>
         </>
       )
@@ -528,6 +499,7 @@ function Placeholder(props) {
 
   return (
     <Rnd
+      id={props.pos.key}
       data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
       key={props.pos.key}
       lockAspectRatio={
@@ -637,20 +609,7 @@ function Placeholder(props) {
       props.pos.type !== radioButtonWidget &&
       props.pos.type !== "checkbox" &&
       props.pos.key === props.selectWidgetId ? (
-        <BorderResize
-          right={
-            props.pos.type === "checkbox" ||
-            props.pos.type === radioButtonWidget
-              ? -21
-              : -12
-          }
-          top={
-            props.pos.type === "checkbox" ||
-            props.pos.type === radioButtonWidget
-              ? -21
-              : -11
-          }
-        />
+        <BorderResize right={-12} top={-11} />
       ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
         props.data?.signerObjId === props.signerObjId &&
         props.pos.type !== radioButtonWidget &&
@@ -670,14 +629,15 @@ function Placeholder(props) {
           setDraggingEnabled={setDraggingEnabled}
           pos={props.pos}
           isPlaceholder={props.isPlaceholder}
+          getCheckboxRenderWidth={getCheckboxRenderWidth}
         />
       )}
       {isMobile ? (
         <div
           style={{
             left: props.xPos(props.pos, props.isSignYourself),
             top: props.yPos(props.pos, props.isSignYourself),
-            width: props.posWidth(props.pos, props.isSignYourself),
+            width: "auto", //props.posWidth(props.pos, props.isSignYourself),
             // height: props.posHeight(props.pos, props.isSignYourself),
             zIndex: "10"
           }}

apps/OpenSign/src/components/pdf/PlaceholderBorder.js

@@ -6,16 +6,13 @@ import {
   resizeBorderExtraWidth
 } from "../../constant/Utils";
 function PlaceholderBorder(props) {
-  const getResizeBorderExtraWidth =
-    props.pos.type === "checkbox" || props.pos.type === radioButtonWidget
-      ? 38
-      : resizeBorderExtraWidth();
+  const getResizeBorderExtraWidth = resizeBorderExtraWidth();
   const defaultWidth = defaultWidthHeight(props.pos.type).width;
   const defaultHeight = defaultWidthHeight(props.pos.type).height;
 
   const handleMinWidth = () => {
     if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
-      return "120%";
+      return props.getCheckboxRenderWidth.width + getResizeBorderExtraWidth;
     } else {
       return props.pos.Width
         ? props.pos.Width + getResizeBorderExtraWidth
@@ -24,7 +21,7 @@ function PlaceholderBorder(props) {
   };
   const handleMinHeight = () => {
     if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
-      return "120%";
+      return props.getCheckboxRenderWidth.height + getResizeBorderExtraWidth;
     } else {
       return props.pos.Height
         ? props.pos.Height + getResizeBorderExtraWidth

apps/OpenSign/src/styles/signature.css

@@ -339,8 +339,6 @@
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
-  min-width:max-content;
-  min-height: max-content;
 }
 
 .finishBtn {