diff --git a/src/knockout/components/popup/popup.html b/src/knockout/components/popup/popup.html
index f3fd46e998..c7c3c87755 100644
--- a/src/knockout/components/popup/popup.html
+++ b/src/knockout/components/popup/popup.html
@@ -12,29 +12,29 @@
class="sv-popup__pointer"
>
+
diff --git a/src/modern/blocks/sv-popup.scss b/src/modern/blocks/sv-popup.scss
index 1dc0aaa8d6..fccb763538 100644
--- a/src/modern/blocks/sv-popup.scss
+++ b/src/modern/blocks/sv-popup.scss
@@ -1,5 +1,6 @@
$primary: var(--primary, #19b394);
$primary-foreground: var(--primary-foreground, #fff);
+$primary-light: var(--primary-light, rgba(25, 179, 148, 0.1));
$background: var(--background, #fff);
$background-dim: var(--background-dim, #f3f3f3);
@@ -30,13 +31,25 @@ sv-popup {
position: absolute;
z-index: 1000;
filter: drop-shadow(0px calcSize(1) calcSize(2) rgba(0, 0, 0, 0.1));
- max-width: 100%;
- max-height: 100%;
padding: calcSize(1) 0;
background: $body-background-color;
border-radius: 4px;
}
+.sv-popup__scrolling-content {
+ max-width: 90vh;
+ max-height: 90vh;
+ overflow: auto;
+ &::-webkit-scrollbar {
+ height: 6px;
+ width: 6px;
+ background-color: $background-dim;
+ }
+ &::-webkit-scrollbar-thumb {
+ background: $primary-light;
+ }
+}
+
.sv-popup__content {
min-width: 100%;
}
diff --git a/src/popup.ts b/src/popup.ts
index bc95e64f19..2b025d6197 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -1,19 +1,18 @@
import { Base } from "./base";
import { property } from "./jsonobject";
import { surveyLocalization } from "./surveyStrings";
-import { PopupUtils } from "./utils/popup";
+import {
+ PopupUtils,
+ VerticalPosition,
+ HorizontalPosition,
+ IPosition,
+} from "./utils/popup";
export class PopupModel extends Base {
@property() contentComponentName: string;
@property() contentComponentData: any;
- @property({ defaultValue: "bottom" }) verticalPosition:
- | "top"
- | "bottom"
- | "middle";
- @property({ defaultValue: "left" }) horizontalPosition:
- | "left"
- | "right"
- | "center";
+ @property({ defaultValue: "bottom" }) verticalPosition: VerticalPosition;
+ @property({ defaultValue: "left" }) horizontalPosition: HorizontalPosition;
@property({ defaultValue: false }) showPointer: boolean;
@property({ defaultValue: false }) isModal: boolean;
@property({ defaultValue: () => {} }) onCancel: () => void;
@@ -25,8 +24,8 @@ export class PopupModel extends Base {
constructor(
contentComponentName: string,
contentComponentData: any,
- verticalPosition: "top" | "bottom" | "middle" = "bottom",
- horizontalPosition: "left" | "right" | "center" = "left",
+ verticalPosition: VerticalPosition = "bottom",
+ horizontalPosition: HorizontalPosition = "left",
showPointer: boolean = true,
isModal: boolean = false,
onCancel = () => {},
@@ -81,10 +80,8 @@ export class PopupViewModel extends Base {
@property({ defaultValue: 0 }) top: string | number;
@property({ defaultValue: 0 }) left: string | number;
@property({ defaultValue: "left" }) popupDirection: string;
- @property({ defaultValue: { left: "0px", top: "0px" } }) pointerTarget: {
- top: string | number;
- left: string | number;
- };
+ @property({ defaultValue: { left: "0px", top: "0px" } })
+ pointerTarget: IPosition;
public container: HTMLElement;
constructor(public model: PopupModel, public targetElement?: HTMLElement) {
diff --git a/src/react/components/popup/popup.tsx b/src/react/components/popup/popup.tsx
index ae1cd3d461..519736d223 100644
--- a/src/react/components/popup/popup.tsx
+++ b/src/react/components/popup/popup.tsx
@@ -47,7 +47,7 @@ export class Popup extends SurveyElementBase {
}
}
-ReactElementFactory.Instance.registerElement("sv-popup", (props) => {
+ReactElementFactory.Instance.registerElement("sv-popup", props => {
return React.createElement(Popup, (props as any) as IPopupProps);
});
@@ -87,9 +87,11 @@ export class PopupContainer extends SurveyElementBase {
}}
>
{pointer}
- {header}
- {content}
- {footer}
+
+ {header}
+ {content}
+ {footer}
+
);
}
diff --git a/src/utils/popup.ts b/src/utils/popup.ts
index e113eeb66e..2bbc4e466d 100644
--- a/src/utils/popup.ts
+++ b/src/utils/popup.ts
@@ -1,12 +1,24 @@
+export type VerticalPosition = "top" | "bottom" | "middle";
+export type HorizontalPosition = "left" | "right" | "center";
+export interface IPosition {
+ left?: number | string;
+ top?: number | string;
+}
+
+export interface INumberPosition extends IPosition {
+ left?: number;
+ top?: number;
+}
+
export class PopupUtils {
public static calculatePosition(
targetRect: ClientRect,
height: number,
width: number,
- verticalPosition: string,
- horizontalPosition: string,
+ verticalPosition: VerticalPosition,
+ horizontalPosition: HorizontalPosition,
showPointer: boolean
- ) {
+ ): INumberPosition {
if (horizontalPosition == "center")
var left = (targetRect.left + targetRect.right - width) / 2;
else if (horizontalPosition == "left") left = targetRect.left - width;
@@ -31,8 +43,8 @@ export class PopupUtils {
}
public static calculatePopupDirection(
- verticalPosition: string,
- horizontalPosition: string
+ verticalPosition: VerticalPosition,
+ horizontalPosition: HorizontalPosition
) {
var popupDirection: string;
if (horizontalPosition == "center" && verticalPosition != "middle") {
@@ -48,15 +60,15 @@ export class PopupUtils {
targetRect: ClientRect,
top: number,
left: number,
- verticalPosition: string,
- horizontalPosition: string
+ verticalPosition: VerticalPosition,
+ horizontalPosition: HorizontalPosition
) {
- var targetPos: any = {};
+ var targetPos: INumberPosition = {};
if (horizontalPosition != "center") {
targetPos.top = targetRect.top + targetRect.height / 2;
- targetPos.left = (targetRect)[horizontalPosition];
+ targetPos.left = targetRect[horizontalPosition];
} else if (verticalPosition != "middle") {
- targetPos.top = (targetRect)[verticalPosition];
+ targetPos.top = targetRect[verticalPosition];
targetPos.left = targetRect.left + targetRect.width / 2;
}
targetPos.left = Math.round(targetPos.left - left);
diff --git a/src/vue/components/popup/popup-container.vue b/src/vue/components/popup/popup-container.vue
index ad027a95c3..efd6bd26f4 100644
--- a/src/vue/components/popup/popup-container.vue
+++ b/src/vue/components/popup/popup-container.vue
@@ -23,24 +23,27 @@
}"
class="sv-popup__pointer"
>
+