PowerApps - Building responsive layout but horizontal/vertical container component are not working as expected

[Anonymous]

Hi,
I am simply trying to show 3 components in column view covering 33.33% each of the width.
I tried to build that adding 3 horizontal container inside the one root horizontal container.

This is how the structure looks.

The Issue

As you can see in the above picture Container2 is covering whole canvas area where Container3 and Container4 are completely moved outside of the canvas. Sometimes if we save the canvas and reopen then all there containers shows up inside the canvas but as soon as I insert my custom component, the custom component takes the full canvas width and moves the other two containers (3 & 4) outside the canvas area.

Resizing is disabled on custom component and hard coding the width also does not work, the component will take full canvas width only.  Attaching screenshot for reference.

Here are my display configurations.


Please suggest what needs to be done here to fix this issue?
I am trying to build a layout similar to the below image.


Thank you.

[Alex_10]

@Anonymous 

Container1.Width = Parent.Width

Container2.FlexibleWidth = Off
Container2.Width = Parent.Width/3

Container3.FlexibleWidth = Off
Container3.Width = Parent.Width/3

Container4.FlexibleWidth = Off
Container4.Width = Parent.Width/3

button.FlexibleWidth = Off
button.Width = Min(Parent.Width, 100)

[Anonymous]

Hi @Alex_10 thanks for your response.
I tried the given configuration but the issue is still there.
I also noticed that as soon as I add my custom code component anywhere in the screen, the column layout of the container breaks. They turn into row.
Attaching the screen shots for your reference.

[Alex_10]

@Anonymous 

Unfortunately, i could not replicate your issue.

i did a test and it works well on my side.

even if my component's size is bigger than column container, it does not make that container to expand.

i placed the component both inside the container and outside the container (see the image)

Container1.Width = Parent.Width
Container1.Height = Parent.Height
Container1.LayoutWrap = false
Container1.LayoutAlignItems = LayoutAlignItems.Start

Container2.FlexibleWidth = Off
Container2.Width = (Parent.Width - 2*Parent.LayoutGap)/3

Container3.FlexibleWidth = Off
Container3.Width = (Parent.Width - 2*Parent.LayoutGap)/3

Container4.FlexibleWidth = Off
Container4.Width = (Parent.Width - 2*Parent.LayoutGap)/3

 

[Anonymous]

Hi @Alex_10 the custom component that you added is that a code component which gets added by importing the component?

Because I have created a solution which contains the react app. Then I am importing that solution inside the canvas app as code component and that is where I am facing the issue.

Can there be an issue inside the solution which is causing this behavior?
Also is there any way you can share this sample code base which I can try?

Thanks for all the help.

[Alex_10]

@Anonymous 

i used a simple component for my testing, not a code one.

I believe that your solution is causing that issue.

PS.

what you can try to do is to add a simple Container (not a vertical or horizontal) inside you Horizontal Container 2 and then add your component inside that simple container.

or

replace all vertical containers with simple containers.

[Anonymous]

@Alex_10 

What you suggested I already tried that but still its same issue. Actually the problem is as soon as I import the solution, regardless of where its get added it will break the column layout of the containers.

In the below screenshot you can clearly see that custom component is not even inside the container still the container layout changed to rows.
 

[Anonymous · Accepted solution]

Hi @Alex_10 

I figure out the issue.
It was some internal CSS of the custom package which was setting particular width of the package and that was causing this issue. I removed it and its working fine now.

Thanks for all your help, really appreciate it.