Popup list display at the top of the screen

[Kamil Krzyzanski]

Hi,

when I display popup list for combobox It is at the top of the screen.

It happens when screen height is less than 600px or when I scroll page.

Combobox added to dialog from angular material and It displayed when choose action from context menu.

For example code for dialog:

<h1 mat-dialog-title style="text-decoration: underline blue;">{{data.name}}h1>

<div mat-dialog-content>

  <div *ngFor="let op of data.operationContext.listOfParams">

    <div class="row justify-content-start">

      <div class="col-3 param-name">{{op.nameParam}}div>

      <div class="col-4" *ngIf="op.typeParam == 'Combobox'">

        <ejs-combobox id="{{'comboelement-'+op.prefixIdElement}}" popupHeight="300px" #comboBoxElement (change)="changeComboBox($event)"

        [dataSource]='op.contextOperationParam.listOfComboBox' [fields]='fields'

          placeholder='Wybierz' [itemTemplate]='itemTemplate'>

          <ng-template #itemTemplate="" let-data="">

            <span><span style="margin-right: 10px;"> {{data.nameItem}}span><span

                class='city'>{{data.name2Item}}span>span>

          ng-template>

        ejs-combobox>

      div>

    div>

  div>

div>

<div mat-dialog-actions>

  <button mat-button color="success" (click)="onAcceptClick()">Acceptbutton>

  <button mat-button color="warn" (click)="onNoClick()">Cancelbutton>

div>

It's look like below

Can you help me?

Attachment: app_403cb52d.zip

[Sevvandhi Nagulan]

Hi Kamil, 

Greetings from Syncfusion support. 

We checked your query of “Popup list display at the top of the screen”. Using the given code example, we prepared the sample by placing the ComboBox component inside the material material component. But we were unable to replicate the reported issue at our end. We have attached the test sample below for your reference. Kindly refer the below sample and code snippet. 

<h1 mat-dialog-title style="text-decoration: underline blue;">{{data.name}}</h1> 

<div mat-dialog-content> 

  <div *ngFor="let op of listOfParams"> 

    <div class="row justify-content-start"> 

      <div class="col-3 param-name">{{op}}</div> 

      <div class="col-4" *ngIf="op == 'Combobox'"> 

        <div>Name</div> 

        <ejs-combobox id="{{'comboelement-'+op.prefixIdElement}}" popupHeight="300px" floatLabelType='Auto' 

          #comboBoxElement (change)="changeComboBox($event)" [dataSource]='listOfComboBox' 

          [fields]='fields' placeholder='Wybierz' [itemTemplate]='itemTemplate'> 

          <ng-template #itemTemplate="" let-data=""> 

            <span><span style="margin-right: 10px;"> {{data.nameItem}}</span><span 

                class='city'>{{data.name2Item}}</span></span> 

          </ng-template> 

        </ejs-combobox> 

        <ejs-combobox id="{{'comboelement-'+op.prefixIdElement}}" popupHeight="300px" floatLabelType='Auto' 

          #comboBoxElement (change)="changeComboBox($event)" [dataSource]='listOfComboBox' 

          [fields]='fields' placeholder='Wybierz' [itemTemplate]='itemTemplate'> 

          <ng-template #itemTemplate="" let-data=""> 

            <span><span style="margin-right: 10px;"> {{data.nameItem}}</span><span 

                class='city'>{{data.name2Item}}</span></span> 

          </ng-template> 

        </ejs-combobox> 

      </div> 

    </div> 

  </div> 

</div> 

<div mat-dialog-actions> 

  <button mat-button color="success" (click)="onAcceptClick()">Wybierz</button> 

  <button mat-button color="warn" (click)="onNoClick()">Anuluj</button> 

</div> 

Sample link: https://stackblitz.com/edit/combobox-inside-angular-mat-dialog 

Please check the above sample and if the information given does not help you, please provide additional information such as Syncfusion exact package version ,replication procedure and a simple issue replicating sample to investigate the issue further at our end.   

Regards, 

Sevvandhi N 

[Kamil Krzyzanski]

I change code for button in example.component.html like this

<button mat-raised-button style="margin-top:800px; margin-bottom:300px" (click)="openDialog()">Open dialog </button>

and popup list at the top window. When I scroll to the bottom of the page popup list is not visible.

[Sevvandhi Nagulan]

Hi Kamil, 

Thank you for sharing the information as requested. 

We checked your query. We were able to replicate the issue at our end. We suggest that you to call the refresh method in open event to resolve the reported issue. We provided the option to refresh the popup using the open event arguments, if the popup does not open in related to the input element. Kindly refer the following code. 

[Html] 

  <ejs-combobox #combo id="{{'comboelement-'+op.prefixIdElement}}" popupHeight="300px" floatLabelType='Auto' 

  #comboBoxElement (change)="changeComboBox($event)" [dataSource]='listOfComboBox' 

  [fields]='fields' placeholder='Wybierz' [itemTemplate]='itemTemplate' (open) ='onOpen($event)'> 

  <ng-template #itemTemplate="" let-data=""> 

    <span><span style="margin-right: 10px;"> {{data.nameItem}}</span><span 

        class='city'>{{data.name2Item}}</span></span> 

  </ng-template> 

</ejs-combobox> 

[TS] 

  onOpen(args){ 

    args.popup.refresh();  

  } 

Please find the modified sample below. 

Sample link: https://stackblitz.com/edit/combobox-inside-angular-mat-dialog-jkxp1v 

Kindly get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Kamil Krzyzanski]

It works. Thank you for your help.

Best regards

[Sevvandhi Nagulan]

Hi Kamil, 

We are glad to hear that the reported issue has been resolved. Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N