How to change height dynamically?

[Andrey]

Hi, Dev Team!

First of all thank you for awesome ScrillView control.

I did not catch how i can provide gallery for images with unknown height?

 

HTML:

<div id="scrollView" style="height: 600px; width: 100%;">   <--here i need dynamic height
</div>
<script id="scrollview-template" type="text/x-kendo-template">
    <div style="text-align: center;">
        <p>#=data.Name#</p><img src="#=setBackground(data.ServerRelativeUrl)#">
    </div>
</script>

 

SCRIPT:

        $("#scrollView").kendoScrollView({
            dataSource: AreaPhotoDS,
            template: $("#scrollview-template").html(),
            enablePager: true
        });

 

 

[Teya]

Hi Andrey,

Thank you for your nice words for the ScrollView widget!

Generally speaking, setting an implicit height to the Scrollview is mandatory since the elements inside the <div id="scrollView"></div> are absolutely positioned. Without a set height, the wrap element would not have a height and the inner elements won't be visible.

However, you can try changing the height() of the ScrollView element on the change() event based on the image height

$("#scrollView").kendoScrollView({
    ...
     change: changeHeight
});
      
function changeHeight(e) {
     $("#scrollView").height(...);
}

Do you think this would work for you?

 

Regards,
Teya
Progress Telerik

[Andrey]

Hi, Teya!

This looks like solution! Thank you!!!