Gallery layout with both horizontal and vertical scrolling

[Nanjundan]

I want to display some data in Grid view with 15 columns and around 500 rows. I am currently using Gallery Layout with vertical scrolling. But i need both the scrolls (Horizontal and vertical scrolling). Is there any way to achieve this?

[hpkeong]

Hi

You can always insert Gallery into Gallery.

Please try.

TQ

[v-monli-msft]

Hi Nanjundan,

If you mean that you want to have only one gallery with both Horizontal and vertical scrolling in PowerApps, then I think I cannot find one existing control in PowerApps so far. 

You could post this idea in the PowerApps Ideas forum, so it might be considered for future releases.

https://powerusers.microsoft.com/t5/PowerApps-Ideas/idb-p/PowerAppsIdeas

Regards,

Mona Li

[VivekBhatt]

Hi Mona,

Is this control still not available ?

I need a gallery which i can scroll both Vertical and Horizontal

[RF1]

Hi,

I have the same problem. 😕 

My way, for now, is to copy the same screen into a "Pop up"  (gallery and details) and change de variables.

also, I added the next button to show the other half , it's working well but it doesn't feel like we wanted.

[GCConsult]

Add a slider bar outside of your horizontal gallery.  Set the MAX of the slider = combined width of the controls in the gallery.  Set the gallery controls X position relative to  -slider1.value.

If you want floating controls that stay in place while the rest scrolls (kind of like a split screen in excel) just have static X positions for those controls while the others are calculated based on the slider position.

[KevHouston1]

@GCConsult  - Could you possibly elaborate on the proposed workaround?

Thanks

[GCConsult]

This example assumes each control is skinnier than the gallery.  If you have a control that is wider than the gallery for some reason, you might have to alter the math a little bit.

Button1.X: 0

     Button1 stays in place on the very left when you scroll

Label1.X:  Button1.X + Button1.Width - Slider1.Value  

     Label1 starts to the right of Button1, and moves left when you increase the slider bar.  Make sure the static control (Button1) is in front of the scrolling controls, and that the static control does not have a transparent fill.

TextInput1.X: Label1.X + Label1.Width

     TextInput1 will always be directly to the right of Label1, and will move relative to Label1's movement

Dropdown1.X: TextInput1.X + TextInput1.Width

    Dropdown1 will always be directly to the right of TextInput1, and will move relative to TextInput1 movement

Slider1.Max: 

Option1: (Easier) = Label1.Width + TextInput1.Width 

      Leave off the last control (as long as it is skinnier than the gallery.Width - static control width)

Option2: (Cleaner) = Label1.Width + TextInput1.Width - (Gallery1.Width - (Button1.Width + DropDown1.Width)) +27

      Make the slider stop when the end of the last control is in view (Prevent "overscrolling")

Gallery1.Width - (Button1.Width + Dropdown1.Width) calculates the space in the gallery between the static control and the last control when scrolled all the way to the right, making the scroll stop right when it hits the end of the right most control.   If you don't have a static control, it would just be - (Gallery1.Width - RightMostControl.Width)

The +27 at the end gives it room for the vertical scroll bar so it doesn't cover up the end of your rightmost control.

Slider1.Default: 0

[ZachS15]

This is now possible with Vertical containers.

• To do it, insert a Vertical container on the screen

• Set Width on that Vertical container to something like Parent.Width
• Set the Height on the Vertical container to Parent.Height
• Set the Horizontal Overflow property on that Vertical container to Scroll

• Then add a normal Container inside the Vertical container

• Set the normal Container’s Width to something like Parent.Width + 500 
  • You can replace 500 with whatever you need
• Set the normal Container's Height to Parent.Height
• Then inside the normal container add a gallery control

• Set the gallery's Width property to Parent.Width
• Remove all Template Padding from the Gallery

• Then for the Gallery, set each column’s width to a percentage of the Parent.Width (e.g. 25%)
• These can be Input controls, Labels, etc.
• This is the important step, usually you’d use Parent.TemplateWidth but seems like TemplateWidth only goes as wide as the App.Width

Then everything scrolls vertically using the gallery and horizontally using the container

[nephinj123]

I am trying this and the gallery seems to match the container width but the row in the gallery doesn't seem to move past app width even though it is set to Parent.Width.  What am I doing wrong?