Make a component with dynamic width

(0) Share

Report

Posted on by Matt_uhb

102

Hi all,

I have an app with a lot of elements that I want to give a specific look, including a background that is a shape of a specific colour, border thickness etc., but rather than have to change dozens of these shapes when editing I would like to make a component.

However, I want the shape to have a relative width: e.g., Parent.Width - 20

When making the component I have to put a shape into the screen, and I can then give the shape this relative width, but the component itself has a static width that won't accept a formula as its value.

Is there a way round this?

Categories:

Building Power Apps

I have the same question (0)

All responses (6)

Answers (1)

iAm_ManCat 18,256 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

Think of the component more like an aspect ratio - it is X wide by Y high, you can then scale this in your app - there are ways to do truly responsive components but they are quite heavily involved.

If you keep the thought of an aspect ration, the size of the component inside the component doesn't matter as you can make the size of the component dynamic when inserted into the App as a control. When you insert the component, make the component's width relative/dynamic from the App side not the component side if its something like headers/ backgrounds/ panels.

I have some stuff you could look at in my Branding Template that might be of use to you - will also save you editing colours etc across the App before you even look at the component aspect 🙂

Was this reply helpful? Yes No
Matt_uhb 102 on at

Like (1)

Report
Copy link

Link copied!

@iAm_ManCat ,
Thanks for your reply - that does help to understand how the components work.
Unfortunately, I want my shapes to be a specific, static height, but shrink the width (only) relative to the size of the parent, so I actually want the aspect ratio to change, where necessary.

Was this reply helpful? Yes No
Verified answer

iAm_ManCat 18,256 Most Valuable Professional on at

Like (3)

Report
Copy link

Link copied!
If you make your component background transparent, the visual relative width will show in your App without the white background.

Then, instead of referring to parent, use the component name like

WidthThinger.Width * 80%

I have examples of this in the template with regard to the header.

also here:

I've attached a quick POC app if that helps,

Cheers,

Sancho

component dynamic...

Was this reply helpful? Yes No
Matt_uhb 102 on at

Like (1)

Report
Copy link

Link copied!

It doesn't quite work for me in this instance, as I need it to be left-aligned to the parent and not centred, and if I align it that way it just resizes the whole item.
However, your solution is simple and clever, and has helped me with another idea I had, so I've marked it as solved.
Thanks for your help.

Was this reply helpful? Yes No
iAm_ManCat 18,256 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

Awesome, glad it helped you get to where you needed!

Hope you have a good weekend,

Cheers,

Sancho

Was this reply helpful? Yes No
Matt_uhb 102 on at

Like (1)

Report
Copy link

Link copied!

Thanks Sancho, you too.
Kind regards

Matt

Was this reply helpful? Yes No