cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Responsive Resident
Responsive Resident

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
Highlighted

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
Highlighted
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.
Highlighted
Responsive Resident
Responsive Resident

@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? 

Highlighted

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

Highlighted
Responsive Resident
Responsive Resident

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

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (11,206)