When I use header and ix-pane. I am getting an automatic scroll

[vamshisai98]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

When I use ix-application-header and ix-pane-layout. I am getting an automatic scroll

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

v2.5.0

Code to produce this issue.

<ix-application-header
  name="Industrial Edge Compatibility Checker"
  class="header"
>
  <ix-dropdown-button icon="info" variant="secondary">
    <ng-container *ngFor="let item of infoItems">
      <ix-typography format="body">
        <ix-dropdown-item
          (click)="onSelect(item.url)"
          [label]="item.label | translate"
        ></ix-dropdown-item>
      </ix-typography>
    </ng-container>
    <ix-divider></ix-divider>
    <ix-typography format="body" text-color="soft">
      <ix-dropdown-item>
        <span [innerHTML]="'HEADER.INFO.COPY_RIGHTS' | translate"></span
      ></ix-dropdown-item>
    </ix-typography>
  </ix-dropdown-button>
</ix-application-header>


<ix-pane-layout
  [variant]="variant"
  [layout]="layout"
  [borderless]="borderless"
  id="search-result__ix-pane-layout"
>
  <ix-pane
    class="search-result__ix-pane"
    [heading]="paneHeading"
    slot="right"
    [size]="paneSize"
    [hideOnCollapse]="true"
    [expanded]="expanded"
    id="search-result__ix-pane"
    (expandedChanged)="expandedChanged($event)"
  >
    <div class="search-result__pane-content" id="search-result__pane-content">
      <div class="search-result__pane-content-box">
        <ix-typography
          format="h4"
          class="search-result__pane-content-header-mismatch"
          *ngIf="mismatchSpecItems.length > 0"
        >
          {{ 'SEARCH_RESULT.PANE.MISMATCH_CAPABILITY' | translate }}
        </ix-typography>
        <div
          class="search-result__inCompatible"
          id="search-result__inCompatible"
          *ngFor="let item of mismatchSpecItems"
        >
          <ix-icon
            name="error"
            alt="mismatch"
            class="icon"
            width="auto"
            height="auto"
          />
          <div
            class="search-result__inCompatible-content"
            id="search-result__inCompatible-content"
          >
            <ix-typography format="body-lg" class="text">
              {{ item.capabilityName }}
            </ix-typography>
            <ng-container *ngIf="item.entries.length > 0">
              <ix-typography
                format="body"
                class="sub-text"
                *ngFor="let key of item.entries"
              >
                <ul>
                  <li [innerHTML]="key.info"></li>
                </ul>
              </ix-typography>
            </ng-container>
          </div>
        </div>
      </div>
      <div class="search-result__pane-content-box">
        <ix-typography
          format="h4"
          class="search-result__pane-content-header-match"
          *ngIf="
            matchSpecItems.length > 0 &&
            compatibilityItemsValue == compatibilityItems[1].value
          "
        >
          {{ 'SEARCH_RESULT.PANE.MATCH_CAPABILITY' | translate }}
        </ix-typography>
        <div
          class="search-result__compatible"
          [ngClass]="{
            'search-result__compatible_mismatch':
              compatibilityItemsValue === compatibilityItems[1].value
          }"
          id="search-result__compatible"
          *ngFor="let item of matchSpecItems"
        >
          <ix-icon
            name="success"
            alt="check"
            class="icon"
            width="auto"
            height="auto"
          />
          <ix-typography format="body-lg">
            {{ item }}
          </ix-typography>
        </div>
      </div>
    </div>
  </ix-pane>
  <div slot="content" id="search-result_content" class="search-result_content">
    <div
      class="search-result__search-container"
      [class.expanded]="expanded"
      id="search-result__search-container"
      (keydown)="onKeyDownSearchResult($event)"
      [ngClass]="{ 'hide-caret': showCaret }"
    >
      <ix-content-header
        (click)="onClickRouteBack()"
        has-back-button="true"
        header-title="Results"
      >
      </ix-content-header>
      <div class="search-result__search-box">
        <app-category-filter-search
          id="search-result__app-category-filter-search"
          [categories]="categories"
          [placeholder]="placeholder | translate"
          [filterState]="filterState"
          [disableSaveBtn]="disableSave"
          [repeatCategories]="repeatCategories"
          [selectValue]="selectValue"
          [categoryItems]="categoryItems"
          [showError]="showAppOrDeviceSelectError"
          [categoryValue]="categoryValue"
          [errorMessage]="
            categoryValue === 'application'
              ? ('COMMON.INVALID_APP_NAME' | translate)
              : ('COMMON.INVALID_DEVICE_NAME' | translate)
          "
          (categoryChange)="onSearchCategoryChange($event)"
          (filterChange)="onSearchFilterChange($event)"
          (inputChanged)="onSearchInputChange($event)"
          (valueChange)="onSearchSelectChange($event)"
          (searchButtonClick)="onSearch()"
        ></app-category-filter-search>
      </div>
    </div>
    <ix-message-bar
      id="search-result__ix-message-bar"
      dismissible="false"
      type="info"
    >
      <div
        class="d-flex align-items-center justify-content-between search-result__ix-message-bar-info"
      >
        {{ 'SEARCH_RESULT.MESSAGE_BAR.INFO' | translate }}
      </div>
    </ix-message-bar>

    <div class="search-result__main" id="search-result__main">
      <span
        >{{ title }}
        {{
          this.categoryValue === 'deviceType'
            ? ('COMMON.APPLICATION(S)' | translate)
            : ('COMMON.DEVICE(S)' | translate)
        }}</span
      >
      <div
        class="search-result__result-select"
        id="search-result__result-select"
      >
        <ix-typography
          format="label"
          class="search-result__result-select-label"
          id="search-result__result-select-label"
        >
          {{ 'SEARCH_RESULT.DROPDOWN.HEADER' | translate }}
        </ix-typography>
        <ix-dropdown-button
          trigger="compatibility-dropdown"
          [label]="dropDownLabel"
          variant="secondary"
          [value]="compatibilityItemsValue"
          id="search-result__result-ix-select"
        >
          <ix-dropdown-item
            *ngFor="let item of compatibilityItems"
            [label]="item.label"
            (click)="onSelectCompatibilityType(item)"
            [value]="item.value"
          >
          </ix-dropdown-item>
        </ix-dropdown-button>
      </div>
    </div>

  </div>
</ix-pane-layout>

[github-actions]

Thank you for creating this issue! It has been labeled as needs reproduction.

To help us assist you better, could you please provide a way for us to access the code (such as a GitHub repository or a StackBlitz link). Without a reliable code reproduction, it might be challenging for us to resolve the issue, and we may have to close it.
Thank you for your understanding!