Kendo-scrollview Auto Height?

[Bryant]

Hello,

I've been working towards creating a scrollview with content inside of the div area. Some information fits, however, when scrolling to new information the scrollview does not allow for height: auto;

below is an example of what my code looks like. I am needing to replace the height with an auto height, to make sure that the content that displays is viewable regardless of the height.

<kendo-scrollview class="scrollview addr-height" [data]="AddressData" [width]="'100%'" [height]="'500px'" [endless]="true" [arrows]="true">

        <ng-template let-item="item">

            <kendo-card-panel>

                <div header>

                    <strong><span>{{ AddressData.indexOf(item) + 1 }}&nbsp;/&nbsp;{{ AddressData.length }}</span></strong>

                    <button class="btn" (click)="selectAddress(item)">Ok</button>

                </div>

                <div always-display class="addr-block">

                    <div class="row">

                        <label class="col-6">Address Type: </label>

                        <label class="col-6">{{ item.ADDRESS_TYPE }}</label>

                    </div>

                    <div class="row">

                        <label class="col-6">Address: </label>

                        <label class="col-6">{{ item.ADDRESS_LINE_1 }}<br>{{ item.ADDRESS_LINE_2 }}</label>

                    </div>

                    <div class="row">

                        <label class="col-6">Primary: </label>

                        <label class="col-6">

                            <kendo-checkbox [(ngModel)]="item.PRIMARY_ADDRESS" [valuePrimitive]="true" [disabled]="true"></kendo-checkbox>

                        </label>

                    </div>

                    <div class="row">

                        <label class="col-6">Admin Contact: </label>

                        <label class="col-6">{{ item.ADMIN_CONTACT }}</label>

                    </div>

                    <div class="row">

                        <label class="col-6">Billing Contact: </label>

                        <label class="col-6">{{ item.BILLING_CONTACT }}</label>

                    </div>

                    <div class="row">

                        <label class="col-6">Phone: </label>

                        <label class="col-6">{{ item.PHONE }}</label>

                    </div>

                    <div class="row">

                        <label class="col-6">Fax: </label>

                        <label class="col-6">{{ item.FAX }}</label>

                    </div>

                </div>

            </kendo-card-panel>

        </ng-template>

    </kendo-scrollview>

 

Please let me know if you have more questions, as this is throwing me for a loop. Unfortunately, I am a new designer, and my coding skills are not yet what they need to be. I am assuming that this can be corrected inside of the TypeScript/JavaScript files.

[Preslava]

Hi Bryant,

The ScrollView component requires the width and height options to be defined in order to set the dimensions of its content. An "auto" option is not supported, as this will cause for the component to jump on slides with different height.

More information about the customisation of the ScrollView dimensions, ca be found here:

https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions/ 

I hope this answers the question. Let me know how this goes.

Regards,
Preslava
Progress Telerik

[Bryant]

Hey Preslava,

Thanks for getting back to me. I wonder if I could put the [height]="height" and bind some CSS to the TypeScript/JavaScript file inside of Angular. Do you think this would be possible?