This is a migrated thread and some comments may be shown as answers.

How to change height dynamically?

2 Answers 245 Views
ScrollView
This is a migrated thread and some comments may be shown as answers.
Andrey
Top achievements
Rank 1
Veteran
Andrey asked on 03 Apr 2020, 02:30 PM

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
        });

 

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Teya
Telerik team
answered on 07 Apr 2020, 02:08 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Andrey
Top achievements
Rank 1
Veteran
answered on 08 Apr 2020, 11:39 AM

Hi, Teya!

This looks like solution! Thank you!!!

Tags
ScrollView
Asked by
Andrey
Top achievements
Rank 1
Veteran
Answers by
Teya
Telerik team
Andrey
Top achievements
Rank 1
Veteran
Share this question
or