cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Tapesh
Post Prodigy
Post Prodigy

Responsive Image bug

Hi all, 

im trying to create and app and my screen as USer Profile Photo on the welcome screen, 

 

I tried to make it responsive but seems like it is just changing its form and is not dynamic. 

 

Please see the image below after preview when the app is published, 

 

Please note: Other components are all working fine and perfect, only issue is with this Image thing. 

 

 

Also, how to change the height of the component dynamically ? 

any idea as you can see in my app the height of the buttons and lables are very small when it comes to Desktop, however it is fine on tablet and also phone. 

 

any idea? 

 

Thanks 

 

Display.png

1 ACCEPTED SOLUTION

Accepted Solutions

Hi @Tapesh ,

Do you want the image to be in center position below of my WelcomeHeader?

 

Please consider set the X property of the Image property to following:

App.Width/2 - Image1.Width/2

set the Y property of the Image property to following:

App.Height/2 - Image1.Height/2

 

set the Width property and Height property of the Image to following:

Min(App.Width/2,App.Height/3)

 

Set the RadiusTopLeft property, RadiusTopRight property, RadiusBottomRight property and RadiusBottomLeft property of the Image control to following:

Image1.Height-Image1.Width/2

Note: The Image1 represents the Image control in your Welcome screen.

 

Please take a try with above formula, then the Image control Responsive Layout issue would be fixed.

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

4 REPLIES 4
v-xida-msft
Community Support
Community Support

Hi @Tapesh ,

Do you mean that the Image control could not be adjusted automatically within your app?

Could you please show more details about the formula you typed within the Width property and Height property of the Image?

 

On your side, if you want to configure the Image control as a Responsive control, you should bind the Width property of the Image control to App.Width formula, bind the Height property of Image control to App.Height formula. e.g. set the Width property of Image control to following:

App.Width/2

set the Height property of Image control to following:

App.Height/4

 

In addition, you should also bind the X, Y property of the image control to App.Width and App.Height formula. e.g. set the X property of Image control to following:

App.Width/2 - Image1.Width/2

set the Y property of Image control to following:

App.Height/2-Image1.Height/2

Please consider configure your app as responsive layout app based on the following article:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

@v-xida-msft 

 

Hi 

I got the image in the right position now, but I have an issue, that image is not displayed like the way i want please see the ScreenShot below for what I am trying achieve actually. 

Display.png

 

Please the codes on the image property:

On X: 

 

 

(Max(App.Width)/2 - UserNameHeader.Width/2 )

 

 

 On Y:

 

 

(WelcomeHeader.Y + WelcomeHeader.Height ) *1.5

 

 

On Width: 

 

 

Max(App.Width)/2

 

 

On Height'; 

 

 

Max(App.Height)/3

 

 

Any Idea why is this issue? 

 

Please Note:  The issue only when i Switch to desktop, else it is fine on any other platform. 

 

 

i want the image to take a center position below of my WelcomeHeader: which is at top of my image and top of my Sign in button. 

 

If you can see the image will know how i want, 

 

and also it should exactly be the same as with BorderRadius? 

 

Any Clue? 

Hi @Tapesh ,

Do you want the image to be in center position below of my WelcomeHeader?

 

Please consider set the X property of the Image property to following:

App.Width/2 - Image1.Width/2

set the Y property of the Image property to following:

App.Height/2 - Image1.Height/2

 

set the Width property and Height property of the Image to following:

Min(App.Width/2,App.Height/3)

 

Set the RadiusTopLeft property, RadiusTopRight property, RadiusBottomRight property and RadiusBottomLeft property of the Image control to following:

Image1.Height-Image1.Width/2

Note: The Image1 represents the Image control in your Welcome screen.

 

Please take a try with above formula, then the Image control Responsive Layout issue would be fixed.

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Thats Great Thanks for the help sir @v-xida-msft 

Helpful resources

Announcements
October Events

Mark Your Calendars

So many events that are happening this month - don't miss out!

Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Users online (4,332)