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

Community site session details

Session Id : 5gaJweJdjEuyrQeGE22gGP
Power Apps - Building Power Apps
Unanswered

Responsive App Layout header icons

Like (1) ShareShare
ReportReport
Posted on 12 Jul 2024 16:57:42 by 75

I am testing out an app that I want to make responsive. I created a container with a gallery, I have text input (Thisitem) to display the data and have put  Max(0,(Parent.Width/13)-(Self.Width/2)) for the X value of each text and messed with the parent.width/ value to get them to the location where I want them on the gallery. Above the gallery, I put a horizontal container and put individual containers inside that for my icon and header and have tried to get them to centered above the gallery items but they don't follow correctly. The icon inside the container is not staying to the left of the header or too much space. Can someone point me in the right direction on how to get his working.

 

Icon X:  Max(0,(Parent.Width/4)-(Self.Width/2))

Header Column Name: Max(0,(Parent.Width/2.2)-(Self.Width/2))

 

Untitled.jpg

 

  • developingteal Profile Picture
    392 on 23 Jul 2024 at 17:58:52
    Responsive App Layout header icons
    What's the status of this/ what's the current error?
  • developingteal Profile Picture
    392 on 15 Jul 2024 at 18:20:21
    Re: Responsive App Layout header icons

    At least looking at your screenshot, it looks like depending on the icon size it fits. Your formulas already seem to make them adjustable, but might need to be shifted slightly more. I would add a slight adjustment - just do like: +10 to the icons which would push them where you need.

  • juliowastaken Profile Picture
    75 on 15 Jul 2024 at 16:49:28
    Re: Responsive App Layout header icons

    Headers are just text inside a container and same for icons, thats why I kept having to mess with 

    Icon X:  Max(0,(Parent.Width/4)-(Self.Width/2))

    Header Column Name: Max(0,(Parent.Width/2.2)-(Self.Width/2))

     

    to get them to align with the gallery info, but they keep moving. How do I make them adjustable with unique elements or if you can point me in the right direction. thank you

  • developingteal Profile Picture
    392 on 15 Jul 2024 at 16:19:27
    Re: Responsive App Layout header icons

    Are the headers themselves a gallery? You could just manually make them if you don't need them to be adjustable or make it adjustable with unique elements

  • juliowastaken Profile Picture
    75 on 15 Jul 2024 at 15:59:13
    Re: Responsive App Layout header icons

    Not sure If I should have put my gallery items into containers and then used Max(0,(Parent.Width/13)-(Self.Width/2)) so its always centered on the container.... What about the icons next to the column headers... how can I make it so they stay to the left of the column header and spaced evenly all the time. thanks

     

     

    Full Screen:

    fullscreen.png

     

    Browser made smaller:

    smaller.png

  • developingteal Profile Picture
    392 on 15 Jul 2024 at 15:42:00
    Re: Responsive App Layout header icons

    what do you mean by not working - what is the intended behavior or end goal you are looking for?

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

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Telen Wang – Community Spotlight

We are honored to recognize Telen Wang as our August 2025 Community…

Congratulations to the July Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 637 Most Valuable Professional

#2
stampcoin Profile Picture

stampcoin 570 Super User 2025 Season 2

#3
Power Apps 1919 Profile Picture

Power Apps 1919 473

Loading complete