Answered

Move the form to the right once expanded - Unhide the form

(2) Share

Report

Posted on by Iantaylor2050

593

I have a powerapp form with hamburger menu control. I need to move the form to the right once hamburger is clicked so that the form is visible.

Currently the form left portion is getting hidden once the hamburger is clicked. May i know how to expand the form on click of hamburger?

Categories:

Building Power Apps

AI Builder

General topics

I have the same question (0)

All responses (5)

Answers (1)

Suggested answer

11manish 769 on at

Like (0)

Report
Copy link

Link copied!
What’s happening in currently

Your menu (left panel) expands on click

But your form stays fixed at same X position

So the menu overlaps and hides part of the form

Solution: Make form responsive to menu width

You need to:

Dynamically shift the form to the right when menu opens

Step-by-step fix
1. Create a variable for menu toggle

On hamburger icon OnSelect:

UpdateContext({varMenuOpen: !varMenuOpen})

2. Control menu width

For your menu container:

Width = If(varMenuOpen, 250, 60)

(adjust values based on your design)

3. Move the form dynamically

For your Form control (or main container):

X = If(varMenuOpen, 250, 60)

4. Adjust form width (important)

Width = Parent.Width - Self.X

This ensures:

Form expands/shrinks properly

No content is hidden

Better approach (Recommended)

Instead of applying to form only:

Wrap everything inside a main container

Layout:

[ Menu Container ] [ Content Container (Form) ]

Then:
Menu container:

Width = If(varMenuOpen, 250, 60)

Content container:

X = MenuContainer.Width

Width = Parent.Width - MenuContainer.Width

Thanks
Manish

Visit my blog : https://powerappbuilder.blogspot.com/

Was this reply helpful? Yes No
Suggested answer

Valantis 2,506 on at

Like (1)

Report
Copy link

Link copied!

Hi @Iantaylor2050,

The cleanest fix is to restructure the screen using a Horizontal Container with two child containers inside it one for the menu on the left, one for your form on the right.

When you do that, the form automatically fills the remaining space when the menu opens or closes, no manual X or Width formulas needed.

1. Wrap your screen content in a Horizontal Container that fills the full screen (Width: App.Width, Height: App.Height)
2. Place your menu inside the left child container. Set its Width to:
If(varShowMenu, 170, 0)
Replace varShowMenu with whatever variable your hamburger icon is already using, and 170 with your actual menu width.
3. Place your form inside the right child container. It will automatically fill the remaining width nothing else to set.

That's it. The layout handles itself.

If that doesn't work or the restructure isn't straightforward in your app, can you send me the following so I can give you the exact formulas for your setup:

- Screenshot of your Tree View (left panel in Power Apps Studio)
- What's currently in your hamburger icon's OnSelect property
- The current X, Width values on your form
- The width of your menu panel

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/

Was this reply helpful? Yes No
Iantaylor2050 593 on at

Like (1)

Report
Copy link

Link copied!

Hi @Valantis

Please find the below code and screenshot.

My Powerapp Screen - Hamburger is a separate icon outside gallery at the top. Left menu is a gallery with 5 items like Home, Customers, Stakeholders, HR, Finance. Top menu is separate label. Content on the right is a separate label.

Once i click on the hamburger menu, left menubar expands and hides the content on the screen as per screenshot below. I understand that we need to use responsive layout to avoid this. I tried but it doesnt work. May i know how to achieve this step by step?

Was this reply helpful? Yes No
Verified answer

WarrenBelz 154,777 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

@Iantaylor2050,

This seems to be a duplicate of this post - I have responded on it today.

Out of interest, this is the ChatGPT response - looks familiar - it is important that we all adhere to the Responsible AI policies for the Community so all contributions can be considered with proper weighting.

Was this reply helpful? Yes No
WarrenBelz 154,777 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

Hi @Iantaylor2050,

A quick follow-up to see if you received the answer you were looking for. Happy to assist further if not.

Please ✅ Does this answer your question if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider answering Yes to Was this reply helpful? or give it a Like ♥
Visit my blog Practical Power Apps LinkedIn

Was this reply helpful? Yes No