Fixed https://github.com/surveyjs/survey-library/issues/8797 - Advanced Header - The header height is decreased on a mobile and a header image is undistinguishable

packages/survey-core/src/header.ts

@@ -132,6 +132,7 @@ export class Cover extends Base {
   public cells: CoverCell[] = [];
   @property({ defaultValue: 0 }) public actualHeight: number;
   @property() public height: number;
+  @property() public mobileHeight: number;
   @property() public inheritWidthFrom: "survey" | "container";
   @property() public textAreaWidth: number;
   @property() public textGlowEnabled: boolean;
@@ -162,7 +163,13 @@ export class Cover extends Base {
   @property() backgroundImageClasses: string;
 
   public get renderedHeight(): string {
-    return this.height && (this.survey && !this.survey.isMobile || !this.survey) ? Math.max(this.height, this.actualHeight + 40) + "px" : undefined;
+    if (this.survey && !this.survey.isMobile || !this.survey) {
+      return this.height ? Math.max(this.height, this.actualHeight + 40) + "px" : undefined;
+    }
+    if (this.survey && this.survey.isMobile) {
+      return this.mobileHeight ? Math.max(this.mobileHeight, this.actualHeight + 40) + "px" : undefined;
+    }
+    return undefined;
   }
   public get renderedtextAreaWidth(): string {
     return this.textAreaWidth ? this.textAreaWidth + "px" : undefined;
@@ -245,6 +252,7 @@ Serializer.addClass(
   "cover",
   [
     { name: "height:number", minValue: 0, default: 256 },
+    { name: "mobileHeight:number", minValue: 0, default: 0 },
     { name: "inheritWidthFrom", default: "container" },
     { name: "textAreaWidth:number", minValue: 0, default: 512 },
     { name: "textGlowEnabled:boolean" },

packages/survey-core/tests/headerTests.ts

@@ -226,7 +226,7 @@ QUnit.test("cell calculations - test width",
   }
 );
 
-QUnit.test("calculateActualHeight",
+QUnit.test("calculateActualHeight desktop",
   function (assert) {
     const cover = new Cover();
 
@@ -257,4 +257,70 @@ QUnit.test("calculateActualHeight",
     cover.actualHeight = actualHeight;
     assert.equal(cover.renderedHeight, "311px", "logo + 40");
   }
+);
+
+QUnit.test("calculateActualHeight mobile",
+  function (assert) {
+    const cover = new Cover();
+    cover.survey = {
+      isMobile: true,
+      onPropertyChanged: { add: () => { } },
+      calculateWidthMode: () => { }
+    } as any;
+
+    cover.logoPositionX = "left";
+    cover.logoPositionY = "middle";
+    cover.titlePositionX = "right";
+    cover.titlePositionY = "middle";
+    cover.descriptionPositionX = "right";
+    cover.descriptionPositionY = "middle";
+
+    let logoHeight = 201;
+    let titleHeight = 22;
+    let descriptionHeight = 303;
+
+    let actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, descriptionHeight);
+    assert.equal(actualHeight, titleHeight + descriptionHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, undefined, "title + description + 40 - no mobileHeight");
+
+    actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, 0);
+    assert.equal(actualHeight, logoHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, undefined, "default height - no mobileHeight");
+
+    logoHeight = 271;
+    actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, 0);
+    assert.equal(actualHeight, logoHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, undefined, "logo + 40 - no mobileHeight");
+
+    logoHeight = 50;
+    cover.mobileHeight = 100;
+
+    actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, descriptionHeight);
+    assert.equal(actualHeight, titleHeight + descriptionHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, "365px", "title + description + 40");
+
+    actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, 0);
+    assert.equal(actualHeight, logoHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, "100px", "mobile height");
+
+    logoHeight = 271;
+    actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, 0);
+    assert.equal(actualHeight, logoHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, "311px", "logo + 40");
+
+    logoHeight = 0;
+    titleHeight = 0;
+    descriptionHeight = 0;
+
+    actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, 0);
+    assert.equal(actualHeight, logoHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, "100px", "mobile height, no title, no logo, no description");
+  }
 );