Unanswered

Gallery layout with both horizontal and vertical scrolling

(2) Share

Report

Posted on by 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?

Categories:

Building Power Apps

I have the same question (0)

All responses (13)

Answers (0)

hpkeong 2,944 on at

Like (0)

Report

Hi

You can always insert Gallery into Gallery.

Please try.
TQ

Was this reply helpful? Yes No
v-monli-msft on at

Like (0)

Report

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

Was this reply helpful? Yes No
VivekBhatt 59 on at

Like (1)

Report

Hi Mona,

Is this control still not available ?
I need a gallery which i can scroll both Vertical and Horizontal

Was this reply helpful? Yes No
RF1 9 on at

Like (2)

Report

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.

Was this reply helpful? Yes No
GCConsult 6 on at

Like (1)

Report

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.

Was this reply helpful? Yes No
KevHouston1 10 on at

Like (0)

Report

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

Thanks

Was this reply helpful? Yes No
GCConsult 6 on at

Like (0)

Report

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

Was this reply helpful? Yes No
ZachS15 63 on at

Like (2)

Report
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

Was this reply helpful? Yes No
nephinj123 4 on at

Like (1)

Report

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?

Was this reply helpful? Yes No
ZachS15 63 on at

Like (2)

Report

There are a couple of features that won't work with the gallery rows like Template Fill, or Template Width. Those will default to the App.Width. Make sure each item in the row has either a hardcoded with (e.g. 200) or is a percentage of the Parent.Width.

I've only tested this out with vertical galleries, not horizontal. Be sure to set the Horizontal Overflow property to "Scroll" on your vertical layout container as well. If you get this right, the gallery and basic container controls will appear to go off the screen when selecting them.

If you want something like TemplateFill, you can just use a rectangle set to Parent.Width and DisplayMode = View. Then just change it's fill properties like you would TemplateFill.

The structure looks like this:

The layout container must have scrolling set for Horizontal Overflow

Was this reply helpful? Yes No