cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate II
Advocate II

Circular Image (widescreen monitor)

I have an interesting dilemma, I am pulling the User().Image into a image control on my app. I set all 4 radius properties to = UserPhoto.Height. When I look on the PowerApp player it is a perfect circle. When my browser is manipulated it looks fine until I get to full screen and then it turns into a rectangle. 😞 Width = 50 and Height = 50 Any suggestions?
1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Power Apps
Power Apps

Re: Circular Image (widescreen monitor)

@Piste,

Can you confirm the same things that I asked @danielleruns.

 

  1. Take a screenshot of your Screen size settings to make sure the screen ratio is locked.powerapps - screen settings.jpg
  2. Republish your app.

  3. Refresh the PowerApps on the device.

  4. Reopen the app.

View solution in original post

10 REPLIES 10
Highlighted
Power Apps
Power Apps

Re: Circular Image (widescreen monitor)

@danielleruns,

Did you unlock the aspect ratio of your app? Or what is the DPI of your device?

 

Can you share a screenshot of the actual control?

Highlighted
Advocate II
Advocate II

Re: Circular Image (widescreen monitor)

@Mr-Dang-MSFT Thanks for your response. I do have the aspect ratio locked.  Attached is a screenshot of the control settings.... this is baffling to say the least. In the PowerApps studio view it looks perfect and when the browser size is close to a tablet size it looks like an oblong shape (this is the preferred screen size I am designing for).

 

Thanks again! 🙂

Highlighted
Power Apps
Power Apps

Re: Circular Image (widescreen monitor)

Clarification: can you show a screenshot of the expected experience and what it actually looks like (as a rectangle)

Highlighted
Advocate II
Advocate II

Re: Circular Image (widescreen monitor)

@Mr-Dang-MSFT Please see attached (the progression as the screen size narrows and the image goes from rectangular, to oblong, to the perfect desired circle). 🙂

 

Thanks!

Highlighted
Power Apps
Power Apps

Re: Circular Image (widescreen monitor)

@danielleruns, I am a little confused about your situation. I understand you have a widescreen monitor. What I don't understand is why each screenshot is a little different with the header. Two screenshots look like they are in a mobile form factor while the third looks like it's in landscape. 

 

Can you provide more context on each screenshot? Under what conditions did the screenshot appear like that? 

 

I ask again--are you sure you have not unlocked the screen ratio for the app or tweaked any app settings?

Highlighted
Advocate II
Advocate II

Re: Circular Image (widescreen monitor)

@Mr-Dang-MSFT The reason the screen size looks different is because I am resizing my browser window to see what the app will look like on different sized screens (I am mainly designing for an iPad Mini sized tablets > Widescreen Monitors). Attached you will find my app settings and aspect ratio is locked.

Highlighted
Advocate II
Advocate II

Re: Circular Image (widescreen monitor)

@Mr-Dang-MSFT Ok, I think I had a cached version on my browser from when I had lock aspect ratio turned off (how it cached over multiple days, I don't know).

 

As long as I lock the aspect ratio it will keep it as a circle. Out of curiousity, is there a way to make the image circular if I DON'T want the aspect ratio locked?

Highlighted
Regular Visitor

Re: Circular Image (widescreen monitor)

Hi to all.

 

I've the same problem, in powerapps studio the image in circle is correct with radius equal width of image. But in mobile is not a circle, to have a correct circle in mobile the width must equal higth+15.

The allegated screenshot show the three case. The slider value correspond to radius(4 value) and higth and width of image.

 

I take all the screenshot from a galaxy tab a.

 

Correct circle in powerapps studio web.jpgNo circle in mobile android.jpgCorrect circle in app android.jpg

Highlighted
Power Apps
Power Apps

Re: Circular Image (widescreen monitor)

@Piste,

Can you confirm the same things that I asked @danielleruns.

 

  1. Take a screenshot of your Screen size settings to make sure the screen ratio is locked.powerapps - screen settings.jpg
  2. Republish your app.

  3. Refresh the PowerApps on the device.

  4. Reopen the app.

View solution in original post

Helpful resources

Announcements
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (10,463)