fix: Popover Style Issue in Bootstrap3

jnetwork-gmbh · Nov 18, 2024 · 03c9798 · 03c9798
1 parent 972db8a
commit 03c9798
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 25 deletions.
diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/datetime/date.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/datetime/date.html
@@ -66,18 +66,13 @@
         class="popover bottom in"
         role="tooltip"
         *ngIf="_showselector"
-        style="
-          display: block;
-          left: unset;
-          right: 0px;
-          top: unset;
-          max-width: 325px;
-        "
+        style="display: block; left: 0px; right: unset; max-width: 325px"
+        [style.top.px]="componentHeight === ControlHeight.Large ? 46 : 34"
       >
         <div
           class="arrow"
-          style="left: unset"
-          [style.right.px]="componentHeight === ControlHeight.Small ? 4 : componentHeight === ControlHeight.Large ? 14 : 10"
+          [style.left.px]="componentHeight === ControlHeight.Small ? 102 : componentHeight === ControlHeight.Large ? 155 : 120"
+          style="right: unset"
         ></div>
         <h3 class="popover-title" style="display: none"></h3>
         <div class="popover-content">

diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/datetime/datetime.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/datetime/datetime.html
@@ -63,15 +63,14 @@
         class="popover bottom in"
         role="tooltip"
         *ngIf="_showselector"
-        style="
-          display: block;
-          left: unset;
-          right: 0px;
-          top: 34px;
-          max-width: 325px;
-        "
+        style="display: block; left: 0px; right: unset; max-width: 325px"
+        [style.top.px]="componentHeight === ControlHeight.Large ? 46 : 34"
       >
-        <div class="arrow" style="left: unset; right: 10px"></div>
+        <div
+          class="arrow"
+          [style.left.px]="componentHeight === ControlHeight.Small ? 140 : componentHeight === ControlHeight.Large ? 205 : 160"
+          style="right: unset"
+        ></div>
         <h3 class="popover-title" style="display: none"></h3>
         <div class="popover-content">
           <sac-dateselector

diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/datetime/time.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/datetime/time.html
@@ -62,15 +62,14 @@
         class="popover bottom in"
         role="tooltip"
         *ngIf="_showselector"
-        style="
-          display: block;
-          left: unset;
-          right: 0px;
-          top: 34px;
-          max-width: 325px;
-        "
+        style="display: block; left: 0px; right: unset; max-width: 325px"
+        [style.top.px]="componentHeight === ControlHeight.Large ? 46 : 34"
       >
-        <div class="arrow" style="left: unset; right: 10px"></div>
+        <div
+          class="arrow"
+          [style.left.px]="componentHeight === ControlHeight.Small ? 102 : componentHeight === ControlHeight.Large ? 135 : 120"
+          style="right: unset"
+        ></div>
         <h3 class="popover-title" style="display: none"></h3>
         <div class="popover-content">
           <sac-dateselector