cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
KimBim
Advocate I
Advocate I

Flexible, Responsive, Dynamic Component Height and Width

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.

4 REPLIES 4
BrianS
Super User
Super User

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
Dual Super User II
Dual Super User II

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!

 

 

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
Frequent Visitor

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

Smemmi_0-1641910383350.png

 

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

 

Smemmi_1-1641910521897.png

 

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

 

Smemmi_2-1641910791491.png

 

That did the trick for me!

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Users online (1,110)