Is there a solution to the problem that the scroll bar on the left side of the modal box returns to the top when an item in the accordion is clicked?
P粉398117857
P粉398117857 2023-09-16 21:09:42
0
1
535

On the initial load, if I click on the "Sales" accordion and then click on "Reported and Forecasted Total Sales", the scroll bar for the marker will jump to the top

tagged ng-container for reporting and forecasting total sales UI

The following is the HTML for the Total Report and Forecast Sales UI

<ng-container *ngIf="cciLeftSideFilterSplitIO && dataSetName === 'DRUGS'">
            <div mat-dialog-content class="matContent" *ngIf="filter.filterGroupKey === 'drugReportedSalesAndForecastGroup'">
                <div class="drugSaleGroupContainer" *ngIf="regions.length > 0">
                    <form [formGroup]="drugSaleForm">
                        <mat-form-field appearance="outline" class="drugSaleRegion">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleRegion" | translate}}&nbsp;</span>
                            </mat-label>
                            <mat-select (click)="showRegion()" panelClass="select-panel-class" [formControlName]="'drugSaleRegionCtrl'">
                              <mat-option *ngFor="let region of regions" [value]="region.optionName">{{region.optionName}}</mat-option>
                            </mat-select>
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="fromYear">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleYearFrom" | translate}}&nbsp;</span>
                            </mat-label>
                            <input appDrugSaleYearFormat (click)="fromYear.open()" appNonNumeric matInput [min]="minYearFrom" [max]="maxYearFrom" [(ngModel)]="selectedFromYear"
                            [matDatepicker]="fromYear" class="dateInputElmt"
                            formControlName="drugSaleYearFromCtrl" (ngModelChange)="datePickedEvent('input','from', $event)">
                            <mat-datepicker-toggle matSuffix [for]="fromYear">
                            </mat-datepicker-toggle>
                            <mat-datepicker class="from-date-picker-ref" panelClass="quick-finder-year-picker" #fromYear startView= 'multi-year' (yearSelected)="chosenYearHandler('from', $event, fromYear)"></mat-datepicker>
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="toYear">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleYearTo" | translate}}&nbsp;</span>
                            </mat-label>
                            <input appDrugSaleYearFormat (click)="toYear.open()" appNonNumeric matInput [min]="minYearTo" [max]="maxYearTo" [(ngModel)]="selectedToYear" 
                            [matDatepicker]="toYear" class="dateInputElmt"
                            formControlName="drugSaleYearToCtrl" (ngModelChange)="datePickedEvent('input','to', $event)">
                            <mat-datepicker-toggle matSuffix [for]="toYear">
                            </mat-datepicker-toggle>
                            <mat-datepicker class="from-date-picker-ref" panelClass="quick-finder-year-picker" #toYear startView= 'multi-year' (yearSelected)="chosenYearHandler('to',$event,toYear)" ></mat-datepicker>
                        </mat-form-field>
                        <span class="drugSaleBtnGroup">
                            <button class="drugSaleClearBtn" (click)="clearSalesFilter()">Clear</button>
                        </span>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="fromValue">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSalesYearValue" | translate}}&nbsp;</span>
                            </mat-label>
                            <input matInput appNonNumeric placeholder="From" formControlName="drugSaleValueFromCtrl">
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="toValue">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSalesYearValue" | translate}}&nbsp;</span>
                            </mat-label>
                            <input matInput appNonNumeric placeholder="To" formControlName="drugSaleValueToCtrl">
                        </mat-form-field>
                    </form>
                </div>
            </div>
        </ng-container>

P粉398117857
P粉398117857

reply all(1)
P粉133321839
<div mat-dialog-content class="matContent" *ngIf="filter.filterGroupKey === 'drugReportedSalesAndForecastGroup'" preserve>
  </div>

Add preserve and check if it is valid

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template