diff --git a/functionalTests/designer/surface.ts b/functionalTests/designer/surface.ts
index a435d972e3..0ea1735c20 100644
--- a/functionalTests/designer/surface.ts
+++ b/functionalTests/designer/surface.ts
@@ -395,4 +395,25 @@ test("Check page adorner state is restored after shrink and stretch", async (t)
await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).notOk();
await t.resizeWindow(1920, 1080);
await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
+});
+test("Popup position", async (t) => {
+ const setCreatorTop = ClientFunction((top) => {
+ const el = document.querySelector(".svc-creator") as HTMLElement;
+ el.style.marginTop = top;
+ });
+ await setCreatorTop("200px");
+
+ await t.resizeWindow(1400, 900);
+ await setJSON({
+ "elements": [
+ {
+ "type": "text",
+ "name": "q1"
+ }
+ ]
+ });
+ await t.click('button[title="Survey settings"]');
+ await t.click('[data-name="locale"]');
+ await t.expect(ClientFunction(() => { return document.querySelector('[data-name="locale"] .sv-popup__container')?.getBoundingClientRect().top; })()).gte(200);
+ await setCreatorTop("");
});
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/side-bar/side-bar-property-grid-header.component.html b/packages/survey-creator-angular/src/side-bar/side-bar-property-grid-header.component.html
index c71dda8669..6bf5520a2e 100644
--- a/packages/survey-creator-angular/src/side-bar/side-bar-property-grid-header.component.html
+++ b/packages/survey-creator-angular/src/side-bar/side-bar-property-grid-header.component.html
@@ -8,7 +8,7 @@
-
+
diff --git a/packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html b/packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html
index 2d4de261d2..c27ac45fdf 100644
--- a/packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html
+++ b/packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html
@@ -3,6 +3,6 @@
\ No newline at end of file
diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
index 440fbdf9ad..d606ce0243 100644
--- a/packages/survey-creator-core/src/creator-base.ts
+++ b/packages/survey-creator-core/src/creator-base.ts
@@ -2292,6 +2292,10 @@ export class SurveyCreatorModel extends Base
if (reason === "test" || reason === "theme") {
this.onPreviewSurveyCreated.fire(this, { survey: survey });
}
+
+ survey.onPopupVisibleChanged.add((_, options) => {
+ if (!options.popup.getAreaCallback) options.popup.getAreaCallback = () => { return this.rootElement; };
+ });
return survey;
}
private getSurveyInstanceCreatedArea(reason: string): string {
@@ -3745,6 +3749,7 @@ export class SurveyCreatorModel extends Base
horizontalPosition: "center",
displayMode: this.isTouch ? "overlay" : "popup"
});
+ newAction.popupModel.getTargetCallback = undefined;
return newAction;
}
diff --git a/packages/survey-creator-core/src/custom-questions/question-color.ts b/packages/survey-creator-core/src/custom-questions/question-color.ts
index cafc78e7b3..e09d5e1c65 100644
--- a/packages/survey-creator-core/src/custom-questions/question-color.ts
+++ b/packages/survey-creator-core/src/custom-questions/question-color.ts
@@ -142,6 +142,7 @@ export class QuestionColorModel extends QuestionTextModel {
popupModel.displayMode = IsTouch ? "overlay" : "popup";
popupModel.setWidthByTarget = true;
popupModel.positionMode = "fixed";
+ popupModel.getTargetCallback = undefined;
listModel.isItemSelected = (itemValue: ItemValue) => itemValue.value == this.value;
return action;
}
diff --git a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
index e5b3cedaee..317f8bcc47 100644
--- a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
+++ b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
@@ -1,4 +1,4 @@
-import { Base, SurveyModel, property, PopupModel, Action, CssClassBuilder } from "survey-core";
+import { Base, SurveyModel, property, PopupModel, Action, CssClassBuilder, getActionDropdownButtonTarget } from "survey-core";
import { PropertyGridModel } from "./index";
import { SelectionHistory } from "../selection-history";
import { SurveyHelper } from "../survey-helper";
@@ -149,6 +149,7 @@ export class PropertyGridViewModel extends Base {
);
this.selectorPopupModel.cssClass += " svc-object-selector";
this.selectorPopupModel.displayMode = this.creator.isTouch ? "overlay" : "popup";
+ this.selectorPopupModel.getTargetCallback = getActionDropdownButtonTarget;
this.selectorPopupModel.registerPropertyChangedHandlers(["isVisible"], () => {
if (!this.selectorPopupModel.isVisible) {
this.objectSelectionAction.pressed = false;
diff --git a/packages/survey-creator-core/src/toolbox.ts b/packages/survey-creator-core/src/toolbox.ts
index 2203290749..c97b581f54 100644
--- a/packages/survey-creator-core/src/toolbox.ts
+++ b/packages/survey-creator-core/src/toolbox.ts
@@ -254,6 +254,7 @@ export class QuestionToolboxItem extends Action implements IQuestionToolboxItem
if (!items || items.length < 1) return;
this.setSubItems({ items: items });
+ this.popupModel.getAreaCallback = this.getArea;
this.component = QuestionToolbox.defaultItemGroupComponent;
}
/**
diff --git a/packages/survey-creator-knockout/src/side-bar/side-bar-property-grid-header.html b/packages/survey-creator-knockout/src/side-bar/side-bar-property-grid-header.html
index 083e7fd8d0..e6a26e0aa7 100644
--- a/packages/survey-creator-knockout/src/side-bar/side-bar-property-grid-header.html
+++ b/packages/survey-creator-knockout/src/side-bar/side-bar-property-grid-header.html
@@ -8,7 +8,7 @@
-
+
\ No newline at end of file
diff --git a/packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html b/packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html
index 5815db3a91..3cf816c845 100644
--- a/packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html
+++ b/packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html
@@ -3,5 +3,5 @@
\ No newline at end of file
diff --git a/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx b/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx
index feb3cbb5ba..04bc418b08 100644
--- a/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx
+++ b/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx
@@ -31,7 +31,7 @@ class SideBarPropertyGridHeader extends SurveyElementBase
diff --git a/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx b/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx
index db00fd055c..0cafcbe99b 100644
--- a/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx
+++ b/packages/survey-creator-react/src/toolbox/ToolboxItemGroup.tsx
@@ -38,7 +38,7 @@ export class SurveyCreatorToolboxItemGroup extends CreatorModelElement this.model.onMouseLeave(this.item, event)}
>
-
+
>;
}
diff --git a/packages/survey-creator-vue/src/side-bar/SideBarPropertyGridHeader.vue b/packages/survey-creator-vue/src/side-bar/SideBarPropertyGridHeader.vue
index ef0ed29cf0..37947d788d 100644
--- a/packages/survey-creator-vue/src/side-bar/SideBarPropertyGridHeader.vue
+++ b/packages/survey-creator-vue/src/side-bar/SideBarPropertyGridHeader.vue
@@ -14,7 +14,7 @@
-
+
diff --git a/packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue b/packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue
index 47639a8e59..e8f96ec39d 100644
--- a/packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue
+++ b/packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue
@@ -11,7 +11,6 @@
@@ -19,7 +18,6 @@
import { SvComponent } from "survey-vue3-ui";
import type {
SurveyCreatorModel,
- IQuestionToolboxItem,
ToolboxToolViewModel,
QuestionToolboxItem,
} from "survey-creator-core";