cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
danielleruns
Level: Powered On

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. Smiley Sad Width = 50 and Height = 50 Any suggestions?
1 ACCEPTED SOLUTION

Accepted Solutions
PowerApps Staff Mr-Dang-MSFT
PowerApps Staff

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.

10 REPLIES 10
PowerApps Staff Mr-Dang-MSFT
PowerApps Staff

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?

danielleruns
Level: Powered On

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! Smiley Happy

PowerApps Staff Mr-Dang-MSFT
PowerApps Staff

Re: Circular Image (widescreen monitor)

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

danielleruns
Level: Powered On

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). Smiley Happy

 

Thanks!

PowerApps Staff Mr-Dang-MSFT
PowerApps Staff

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?

danielleruns
Level: Powered On

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.

danielleruns
Level: Powered On

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?

Piste
Level: Powered On

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

PowerApps Staff Mr-Dang-MSFT
PowerApps Staff

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.