Power Community

Power Community

Auto height, Containers and flexible font sizes in Power Apps

It is important that each control on your screen fits and that nothing overlaps. Auto Height and Containers can help you be with flexible font sizes.

Flexible font sizes

Have you ever tried adjusting the default font size on your mobile or Windows device? Then when you try to use your app, text doesn’t fit in the areas that are supposed to fit in. Some apps become really unusable.

An app that should look like this.

Auto height, Containers and flexible font sizes in Power Apps Microsoft Power Apps image

Might actually look like this when you increase the font size.

Auto height, Containers and flexible font sizes in Power Apps Microsoft Power Apps image 1

We have to consider all sorts of different fonts that may be used. And of course different letters will use a different amount of space. Calculating the size of the box without knowing the content is very difficult. Or even impossible!

So how do we avoid this in Power Apps.

Auto Height in Power Apps

Within Power Apps, we can set the Auto Height property. I’m really not sure why this isn’t just always set by default. As you can see in the below example my text now fits within the boxes however the boxes don’t fit anymore. As we can see the label controls are moving on top of each other.

Auto height, Containers and flexible font sizes in Power Apps Microsoft Power Apps image 2

Now there are two approaches. The first approach is to calculate the X and Y positions so that every control appears next and underneath each other.

Adding Containers

Now the next step is Containers. As the font size is varied using my slider the containers are resizing as they need to.

Using Containers flexible font sizes in Power Apps

But even when we use containers we will still find issues with text not fitting.

Auto height, Containers and flexible font sizes in Power Apps Microsoft Power Apps image 4

The trick here is to make sure that the Horizontal containers inside my top level vertical containers need to have flexible height switched off.

Flexible Height

And in addition to the flexible height setting, the Height property also needs to be calculated finding the tallest element within the Container.

Auto height, Containers and flexible font sizes in Power Apps Microsoft Power Apps image 6

This post was originally published on this site

- Advertisement -spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement - Advertisement

Latest News

Web resource method does not exist in Dynamics 365 CE

Got the below error while working on Onload of Account record JavaScript in Microsoft Dynamics 365 CE. Script Error One of...

More Articles Like This

- Advertisement -spot_img