Fixed #9032 - Advanced header. The text should use a container's width as max-width when text-width property's value is 0px

packages/survey-angular-ui/src/components/header/header-cell.component.html

@@ -7,10 +7,10 @@
           <ng-template [component]="{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }"></ng-template>
         </div>
       </div>
-      <div *ngIf="model.showTitle" class="sv-header__title" [style]="{ maxWidth: model.textAreaWidth }">
+      <div *ngIf="model.showTitle" class="sv-header__title" [style]="{ maxWidth: model.renderedtextAreaWidth }">
         <sv-ng-element-title [element]="model.survey"></sv-ng-element-title>
       </div>
-      <div *ngIf="model.showDescription" class="sv-header__description" [style]="{ maxWidth: model.textAreaWidth }">
+      <div *ngIf="model.showDescription" class="sv-header__description" [style]="{ maxWidth: model.renderedtextAreaWidth }">
         <div *ngIf="model.survey.renderedHasDescription" [class]="model.survey.css.description" [model]="model.survey.locDescription" sv-ng-string></div>
       </div>
     </div>

packages/survey-core/src/header.ts

@@ -67,6 +67,9 @@ export class CoverCell {
   get textAreaWidth(): string {
     return this.cover.renderedTextAreaWidth;
   }
+  get renderedtextAreaWidth(): string {
+    return this.cover.renderedTextAreaWidth;
+  }
 }
 
 export class Cover extends Base {
@@ -181,8 +184,18 @@ export class Cover extends Base {
     }
     return undefined;
   }
+
   public get renderedTextAreaWidth(): string {
-    return this.textAreaWidth ? this.textAreaWidth + "px" : undefined;
+    if (this.textAreaWidth) {
+      return this.textAreaWidth + "px";
+    }
+    if (this.survey && this.survey.width) {
+      return this.survey.width;
+    }
+    // if (this.survey.responsiveStartWidth) {
+    //   return this.survey.responsiveStartWidth + "px";
+    // }
+    return "100%";
   }
   public get isEmpty(): boolean {
     return !this.survey.hasLogo && !this.survey.hasTitle && !this.survey.renderedHasDescription;

packages/survey-core/tests/headerTests.ts

@@ -212,8 +212,8 @@ QUnit.test("cell calculations - test width",
   function (assert) {
     const cover = new Cover();
 
-    assert.equal(cover.cells[0].textAreaWidth, undefined, "default");
-    assert.equal(cover.cells[0].textAreaWidth, undefined, "equal to cover + px");
+    assert.equal(cover.textAreaWidth, 0, "default");
+    assert.equal(cover.cells[0].textAreaWidth, "100%", "equal to cover textAreaWidth");
 
     cover.textAreaWidth = 120;
     assert.equal(cover.textAreaWidth, 120, "cover text width");
@@ -304,4 +304,22 @@ QUnit.test("calculateActualHeight mobile",
     cover.actualHeight = 0;
     assert.equal(cover.renderedHeight, "100px", "mobile height, no title, no logo, no description");
   }
-);
+);
+
+QUnit.test("renderedTextAreaWidth",
+  function (assert) {
+    const cover = new Cover();
+    cover.survey = {
+      width: undefined,
+      onPropertyChanged: { add: () => { } },
+      calculateWidthMode: () => { }
+    } as any;
+    assert.equal(cover.renderedTextAreaWidth, "100%", "default text area width");
+    cover.textAreaWidth = 300;
+    assert.equal(cover.renderedTextAreaWidth, "300px", "given text area width");
+    cover.textAreaWidth = 0;
+    assert.equal(cover.renderedTextAreaWidth, "100%", "full width text area width");
+    cover.survey.width = "400px";
+    assert.equal(cover.renderedTextAreaWidth, "400px", "text area width from survey");
+  }
+);

packages/survey-react-ui/src/components/header.tsx

@@ -33,6 +33,7 @@ export class HeaderMobile extends React.Component<any, any> {
         {this.renderLogoImage()}
       </div>) : null}
       {this.model.survey.hasTitle ? (<div className="sv-header__title" style={{ maxWidth: this.model.renderedTextAreaWidth }}>
+
         {/* {ReactElementFactory.Instance.createElement("survey-element-title", { element: this.model.survey })} */}
         <TitleElement element={this.model.survey} />
       </div>) : null}
@@ -69,11 +70,11 @@ export class HeaderCell extends React.Component<any, any> {
         {this.model.showLogo ? (<div className="sv-header__logo">
           {this.renderLogoImage()}
         </div>) : null}
-        {this.model.showTitle ? (<div className="sv-header__title" style={{ maxWidth: this.model.textAreaWidth }}>
+        {this.model.showTitle ? (<div className="sv-header__title" style={{ maxWidth: this.model.renderedtextAreaWidth }}>
           {/* {ReactElementFactory.Instance.createElement("survey-element-title", { element: this.model.survey })} */}
           <TitleElement element={this.model.survey} />
         </div>) : null}
-        {this.model.showDescription ? (<div className="sv-header__description" style={{ maxWidth: this.model.textAreaWidth }}>
+        {this.model.showDescription ? (<div className="sv-header__description" style={{ maxWidth: this.model.renderedtextAreaWidth }}>
           <div className={this.model.survey.css.description}>
             {SurveyElementBase.renderLocString(this.model.survey.locDescription)}
           </div>

packages/survey-vue3-ui/src/components/header/HeaderCell.vue

@@ -16,7 +16,7 @@
       <div
         v-if="model.showTitle"
         class="sv-header__title"
-        :style="{ maxWidth: model.textAreaWidth }"
+        :style="{ maxWidth: model.renderedtextAreaWidth }"
       >
         <SvComponent
           :is="'survey-element-title'"
@@ -27,7 +27,7 @@
       <div
         v-if="model.showDescription"
         class="sv-header__description"
-        :style="{ maxWidth: model.textAreaWidth }"
+        :style="{ maxWidth: model.renderedtextAreaWidth }"
       >
         <div
           v-if="model.survey.renderedHasDescription"