cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Nanjundan
Advocate IV
Advocate IV

Gallery layout with both horizontal and vertical scrolling

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?

11 REPLIES 11
hpkeong
Community Champion
Community Champion

 

Hi

 

You can always insert Gallery into Gallery.

 

Please try.

TQ

 

hpkeong
v-monli-msft
Community Support
Community Support

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

Community Support Team _ Mona Li
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Hi Mona,

 

Is this control still not available ?

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

RF1
Frequent Visitor

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
New Member

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.

 

 

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

 

Thanks

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

 

Capture12.PNG

Capture.PNG

 

 
 

 

 

ZachS15
Advocate I
Advocate I

This is now possible with Vertical containers.

 

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

ZachS15_0-1610026189740.png

  • 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

ZachS15_3-1610026261516.png

  • Then add a normal Container inside the Vertical container

ZachS15_1-1610026189742.png

  • 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

Capture2.JPG

  • 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

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?

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Top Kudoed Authors
Users online (1,602)