Flexible, Responsive, Dynamic Component Height and Width

[KimBim]

Hey Guys,

is there any way to achieve a flexible component height and width based an a variable?

I've created an Hamburgermenu with flexible gallery height based on the number of items combined with a timer based animation.

now i want the component to be as height as the gallery.

Any ideas :)?

Thanks in advance.

[BrianS]

Galleries have a Height and Width parameter. You should be able to set a variable to that value in the OnVisible property of the page.

[yashag2255]

Hi @KimBim 

Can you try to set the height property of the component on screen to auto expand based on the number of rows as;

Component -> Height -> 20 * CountRows(Collection)

Here, I have assumed that each row will take 20px and the number of rows that will appear in the component is retrieved through a collection. You can replace collection with actual datasource. 

Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

[KimBim]

Hey @yashag2255 and @BrianS,

thanks for your quick replies.

Unfortuntely i could not find a way to make it work...

What i want to achieve is define the component height based on the CountRows(gallery.allitems)*gallery.TemplateHeight.
Since i use a timer to create an animation for the collapsing of the menu i think a cannot work with a static number like 20.

[Smemmi]

Hi,

I came across this post as I was trying to achieve the same thing. Not sure if you managed to resolve it but I thought this solution might help other too.

Create a custom output property  on the component (I've called it ComponentFlexibleHeight) which will output the required height number. Set the following values:

• Property type - Output
• Data type - Number

Now set the default value of this custom output property to the flexible height you require for the component. In your case: CountRows(gallery.allitems)*gallery.TemplateHeight

Now select the component itself and set its Height property to the value of this custom output property by setting it to: Self.ComponentFlexibleHeight

That did the trick for me!