web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Screen Layouts and Gal...
Power Apps
Answered

Screen Layouts and Gallerys

(0) ShareShare
ReportReport
Posted on by 36

First of this is my first time posting and I want to say hello to everyone in power app land!...

 

I couldn't find this answer searching the forums or you tube videos so here it goes. I am making a scheduling app for my company and I am throwing around a few designs. The big issue for me right playing around with screen layouts. This app will be used on different size screens and tablets. (I`m hoping anyways)...

I can get rectangles, buttons and other control items to scale with screen sizes but for the love of god I cant get galleries to scale with the screen size.

 

I ether have waste space on the right of the screen or its way to wide . The gallery that I am using is just a horizontal view of  a work week. Monday thru Friday with dates of the  current week.

 

Any help would be great!

 

Thanks,

Greg

Categories:
I have the same question (0)
  • mike528 Profile Picture
    236 on at

    Hi and welcome to PowerApps 🙂

     

    When I resize galleries I set the size of the gallery first then set the templatesize based on the width of the gallery divided by the number of items I want to be shown, and then size the controls based on the template width. So in your case you might have...

     

    gallery.width = app.width - self.x * 2

     

    which would allow you to center the gallery on the width of the app with equal padding, don't move the gallery, because as soon as you do, PA overwrites your formulas and replaces them with numbers. 😞

     

    then set the gallery.templatesize = self.width / 7 

     

    so you have 7 equal sections, one for each day of the week and can turn off navigation and scrollbars.

     

    Hope this helps, have fun with your scheduling app.

  • legion1202 Profile Picture
    36 on at

    Mike528 thanks for the quick reply...

     

    This makes sense from the documentation I have been reading.. 

     

    However I am struggling on where to put the gallery.width = app.width - self.x * 2 piece of code?

     

    Thanks,

    GA

     

     

  • JayMagness Profile Picture
    1,663 on at

    Hi,

     

    I actually run all my apps out of teams it takes care of the screen sizes.

     

    I can show examples if you send me an email jay@research-nest.com 

  • mike528 Profile Picture
    236 on at

    Sorry, to clarify 

    App.Width - Self.X * 2 

    would be the expression you use in the gallery's width property.

    Hope this helps.

  • legion1202 Profile Picture
    36 on at

    That worked perfectly..

     

    Now if I wanted to center the gallery how could I keep it centered? Would I do something similar with the x and y cords?

     

    I am reading over this https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout and its just confusing to me lol.

     

    I`m slowly understand everything else (filters, searchboxes, etc).

     

    I Understand the code... Just not sure where it goes... I would love to use the break point examples and hide or add certain buttons depending on screen limitations. I would suppose it would be a if statement if screen is small or large and that would go into the visible property. But not sure how to get the app to find that out.

     

    Thanks,

    Greg

     

     

  • legion1202 Profile Picture
    36 on at

    Thanks JayMagness

     

    May take you up on that offer. We are looking at teams 

  • Verified answer
    mike528 Profile Picture
    236 on at

    Greg,

     

    Glad that worked. When I do these types of auto-size / auto-location exercists I like to draw it out on a piece of paper and then map my coordinates, helps me visualize but I was a draftsman back in the day (yes that dates me).

     

    If you want to center something  then take the width of the area that you have available, lets just say you have the full screen. so App.Width. Then subtract the width of the component (gallery in your case - Gallery.Width) and divide it by 2 (equal spacing on each side). So, what you end up with is an expression in the Gallery.X property of;

     

    (App.Width - Self.Width )/2

     

    You would apply the same for vertical centering using Height in the Gallery.Y property.

     

    (App.Height - Self.Height )/2

     

    To get a bit more complicated but you get the basis of the pattern. Let's say you have 3 objects you wanted evenly distributed across the a screen but the area was between and X of 500 and and X of 1000.

     

    Your available area width is 500. and lets say you want the objects aligned with the left and right edges (no spacing). 

     

    The inter-control spacing is (500 - Control1.Width - Control2.Width - Control3.Width)/2

    Since you will reuse this spacing in multiple expressions, in the screen Visible you can create a variable to hold the number;

     

    UpdateContext({varControlSpacing: (500 - Control1.Width - Control2.Width - Control3.Width)/2})

     

    Then the X property for each control would be

     

    Control1.X  set to 0

    Control2.X  set to Control1.X + Control1.Width + varControlSpacing

    Control2.3  set to Control2.X + Control2.Width + varControlSpacing

     

    Hope this helps you. 

     

    Mike

  • JayMagness Profile Picture
    1,663 on at

    Ok I am here so just send a note...

  • legion1202 Profile Picture
    36 on at

    Makes sense! and worked...

     

    I`ll try to keep this to be my last question and I`ll mark it Solved haha...

     

    Speaking of Variables could I use this to collect screen size information... Then do a if statement depending on the Vars to display cretin screen setups? Or do I trying to use the break points?

     

    Thanks,

    GA

  • mike528 Profile Picture
    236 on at

    Yes, if you are capturing based on screen size, do it in the App OnStart since that only runs once when the app loads up. and that will not change.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the July Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 401 Most Valuable Professional

#2
11manish Profile Picture

11manish 201 Super User 2026 Season 2

#3
MS.Ragavendar Profile Picture

MS.Ragavendar 128 Super User 2026 Season 2

Last 30 days Overall leaderboard