Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Ideas
    • Power Apps Ideas
    • Community Engagement
    • Demo Extravaganza 2021
    • Demo Extravaganza - Components 2021
    • Power Apps Community Demo Extravaganza 2020
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Webinars and Video Gallery
    • Tutorial on "How to build Responsive Power Apps"

    Tutorial on "How to build Responsive Power Apps"

    07-27-2021 06:17 AM - last edited 09-07-2021 10:17 AM

    Dual Super User II RezaDorrani
    Dual Super User II
    1836 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    RezaDorrani
    Dual Super User II RezaDorrani
    Dual Super User II
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Tutorial on "How to build Responsive Power Apps"

    ‎07-27-2021 06:17 AM

    This video is a step-by-step beginner’s tutorial for creating Responsive Canvas Power Apps.

    The responsive layout containers & screen templates will let us build truly responsive Apps that works across Desktop, Mobile and Tablet experiences.

    A responsive Power App is one in which controls in the App can respond to different devices or screen sizes.

     

    Video covers key Microsoft PowerApps responsive UI design principles & concepts:

    ✅ Horizontal & Vertical Responsive Containers

    ✅ Container Properties - Stretch, Fill, Flexible width, Flexible height, etc.

    ✅ Screen Layout Templates

    ✅ Responsive Dynamic Tabs

    ✅ Responsive Gallery

    ✅ Responsive Form Control

    ✅ Responsive Filter Container Controls


    Thanks,
    Reza Dorrani, MVP
    YouTube
    Twitter

     

    watch?v=1o2L0DADzKQ

    Labels:
    • Labels:
    • API Tips
    • Community Tips & Tricks
    • Connector Series
    • Design Matters UX Tips
    • Friday Function Series
    • General PowerApps
    • PowerApps Hacks
    • Pro Developer Topics
    • SharePoint Magic
    Message 1 of 7
    1,836 Views
    0 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    bbsin
    bbsin Post Prodigy
    Post Prodigy
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎09-22-2021 01:24 AM

    Hi @RezaDorrani 

     

    I was following your video but not sure why mine tab and display didn't turn up like yours.  Can you kindly help.  Thank you

     

    On canvas, the tab was not showing all - there are 7 tabs  and original formula

     

     
     

    1.JPG

     

     

    when the change the formula to .. there's a gap and it's not auto sizing nicely?  

    The tab all squeeze together there is a big gap on the right side

    The gallery also got chop off?

     

    Tab -Wrapcount = 1

    Tab -Templatesize = Parent.Height

     

    Where did I do wrong? Can you please help me.  Thank you

     

    1.png

     

    if I change wrap count to the formula, it become like that.

    bbsin_7-1632300222784.png

     

     

    Message 2 of 7
    1,092 Views
    0 Kudos
    Reply
    vishalholam007
    vishalholam007
    Regular Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎11-18-2021 11:55 PM

    @RezaDorrani 

    I seen your complete video and try same 4 to 5 times but app not showing responsive is there any version issues of any other setting you made and miss in video.  My current version showing 3.21112.22

    Please let us know can we make fully responsive app so we are looking for other customize tool like lightning and nitex

    Message 3 of 7
    842 Views
    0 Kudos
    Reply
    RezaDorrani
    Dual Super User II RezaDorrani
    Dual Super User II
    In response to vishalholam007
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎11-19-2021 10:03 AM

    @vishalholam007 

     

    video description has link to download sample app.

     

    Message 4 of 7
    829 Views
    0 Kudos
    Reply
    roryafrancis
    roryafrancis
    New Member
    In response to RezaDorrani
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎11-19-2021 03:11 PM

    I don't see the link to download the sample app. I am also having problems with the showing the tabs correctly.

    Message 5 of 7
    817 Views
    0 Kudos
    Reply
    RezaDorrani
    Dual Super User II RezaDorrani
    Dual Super User II
    In response to roryafrancis
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎11-19-2021 03:43 PM

    @roryafrancis @vishalholam007 

     

    here is the link

    https://github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip

    Message 6 of 7
    814 Views
    0 Kudos
    Reply
    roryafrancis
    roryafrancis
    New Member
    In response to RezaDorrani
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎11-20-2021 05:24 PM

    Thanks!

    Message 7 of 7
    798 Views
    0 Kudos
    Reply

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2022 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks