We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Autocomplete popup height

I am trying to set the Height of the popup height as so  (Below) but get a compile error, without the popup height the code compiles fine

    <div class="ix-search ix-search-input">

      <ejs-autocomplete id='combinedIssuerSearch' #searchCombinedIssuers

                        [dataSource]='ixDispalyCombinedIssuerList'

                        [fields]='issuerFields'

                        ShowBorder='False'

                        (select)='selectIssuer($event)'

                        [placeholder]='defaultText'

                        [filterType]='issuerFilterType'

                        (filtering)='onFiltering($event)'

                        [showClearButton]="false"

                        class="auto-complete-search"

                        [popupHeight]='350px'>

        <ng-template #itemTemplate let-data>

          <!--set the value to itemTemplate property-->

          <div class='item'>

            <div class='issuer-name'> {{data.Name}}</div>

            <div class="ls_spv">{{data.Structure != 'SPV' ? 'BT' : data.Structure}}</div>

          </div>

        </ng-template>

        <ng-template #noRecordsTemplate let-data>

          <div>

            No Issuer Available

          </div>

        </ng-template>        

      </ejs-autocomplete>




3 Replies 1 reply marked as answer

SP Sureshkumar P Syncfusion Team February 13, 2023 12:48 PM UTC

Hi Jawahar,

Based on your shared code example, The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. So, the value of 350px consider as string which is the reason the issue replicated. In this scenario we suggest you update the height value without brackets to resolve the issue.

Find the code example here:

 <ejs-autocomplete

        id="games"

        #sample

        [dataSource]="sportsData"

        [(value)]="value"

        [placeholder]="waterMark"

        [fields]="fields"

        (change)="onChange($event)"

        popupHeight="350px"

      ></ejs-autocomplete>

 

Find the sample here: https://stackblitz.com/edit/angular-mxhnhz?file=src%2Fapp.component.html

To know more about the angular property binding syntax, refer to the documentation link: https://angular.io/guide/property-binding

Regards,

Sureshkumar P



Marked as answer

JR Jawahar Rajan February 13, 2023 11:00 PM UTC

Hello Sureshkumar,
Thanks for your help, I should have realized that the angular [] will cause it to evaluate the expression 

Sorry about this 
Jawahar



SS Shereen Shajahan Syncfusion Team February 14, 2023 04:34 AM UTC

Hi Jawahar,

Glad to know that your issue has been resolved. We are marking this as solved.

Regards,

Shereen


Loader.
Up arrow icon