Answered

Responsiveness question

(0) Share

Report

Posted on by KevinGador

899 Moderator

Hi Community,

I am recently exploring on how to create a responsive application.

I came across a problem with Galleries and how to make them responsive.

These are my display settings:

Layout: Fixed
Size: 16 by 9 default

Orientation: Landscape

Lock Aspect Ratio: Disabled
Lock Orientation: Disabled
Mobile notification area: Disabled

This is the structure of the calendar:

This is how it looks during preview mode. Doesnt take up all the space during preview mode. There is a bar left and right. :

This is how it looks during play of the published app. Takes up all the space available, I believe due to disabling the lock aspect ratio. Fri and Sat is missing.

The width formula of the gallery is Parent.Width which should just follow the containers "Stretch" and should be the available size of the user's screen. Flexible Width is disabled for the gallery.

now the template size property is set to Self.Width/7 which technically I believe will divide the container's available space by 7.
then the Width property of the text inside gallery control is set to Parent.TemplateWidth.

My question is why isn't it dividing the space by 7? My assumptions are in the published app, its using all the available space and am wondering why it can't divide the total width by 7 only 5 texts are shown.

How would you make this responsive?

Categories:

Building Power Apps

All responses (5)

Answers (1)

Sort by

Suggested answer

11manish 4,615 Super User 2026 Season 2 on at

Like
a
(0)

Report
Copy link

Link copied!

Don't try to fix it by changing TemplateSize randomly. Check WrapCount, Gallery layout/orientation, TemplatePadding, and the parent container's actual runtime width first.
KevinGador 899 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

Hi I haven't made a change for the TemplateSize yet. Its the only logic I can think of is to divide it by 7 the number of days.

WrapCount is 1
Gallery layout is horizontal.
TemplatePadding is 5.

The parent container is using the stretch one. Then the main container's width is set as
turned on flexible width.
Suggested answer

Valantis 7,371 Super User 2026 Season 2 on at

Like
a
(2)

Report
Copy link

Link copied!

Hi @KevinGador,

the Preview vs Play mismatch is actually documented, not just a gallery formula issue.

if Scale to Fit is on and Lock Aspect Ratio is off, your preview won't be accurate, and call that combination not recommended.

That's what you've got, Lock Aspect Ratio off, nothing said about Scale to Fit so it's presumably still on by default.https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/preview-app

The documented behavior for that combo is genuinely different between the two, in Studio the screen scales to the available window, but in actual Play mode Power Apps scales to the smaller of width or height, then fills the larger edge separately. Different scaling logic, not the same math, so what looks right in Preview can break in Play regardless of your gallery formulas.

https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/set-aspect-ratio-portrait-landscape

The actual supported fix is turning off Scale to Fit entirely, not just Lock Aspect Ratio on its own. That auto disables Lock Aspect Ratio too, and once both are off, Screen Width and Height track Max(App.Width, App.DesignWidth) and Max(App.Height, App.DesignHeight), consistent in both Studio and Play.https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-responsive-layout

Fix that first,

then the TemplatePadding formula from before still applies on top of it, TemplatePadding is space between items, not included in TemplateSize, so Self.Width/7 still needs the padding subtracted to fit exactly 7 columns without overflow.https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-gallery

Best regards,

Valantis ✅ If this helped solve your issue, please Accept as Solution so others can find it quickly.

❤️ If it didn’t fully solve it but was still useful, please click “Yes” on “Was this reply helpful?” or leave a Like :).

🏷️ For follow-ups @Valantis.

📝 https://valantisond365.com/ 💼 LinkedIn ▶️ YouTube
KevinGador 899 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

Hi Valantis,

I am afraid there's no more scale to fit option. I made a seperate post about this yesterday and I've also made a new app and looked for the settings but its no longer there. :/
Verified answer

KevinGador 899 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

I finally got the answer to this question.

I changed the app layout from Fixed to Responsive.

and now even when I am on preview mode. This is reflecting the size of my screen!

and the days are now fully shown! Finally :D