web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Synchronise scrolling ...
Power Apps
Unanswered

Synchronise scrolling multiple galleries

(1) ShareShare
ReportReport
Posted on by Microsoft Employee

My app involves the comparison of multiple projects.

 

I have approached this by using a horizontal gallery containing multiple vertical galleries.

 

Each project's data is assigned to a vertical gallery.

 

However, this approach has an annoying flaw: the vertical galleries scroll independently of each other.

 

Is there any way to sync the scrolling of these galleries?

 

See the attached screenshowt

 

Much appreciated.

multiplegalleryscroll.PNG
Categories:
  • WillEdz Profile Picture
    47 on at

    Hi 

     

    I too have this problem. The App allows the creation of a gant chart project schedule.

     

    My work around is to use a scrollable screen, put the gallery / galleries into the canvas. Then make the canvas height something big like 8000. Then change the gallery height to 7500. 

     

    This allows the canvas to scroll and because of its massive height the vertical scroll bars arent required in the horizonatal gallery. It is clunky and I dont particuarly liek this soloution. Works okish on a touch screen but its clunky as hell on a normal display 

     

    Hope this helps and that someone has a better solution

     

    WIll

  • v-yutliu-msft Profile Picture
    Microsoft Employee on at

    Hi @Anonymous ,

    Do you want to scroll multiple galleries at the same time?

    I'm afraid it's not supported in PowerApps currently.

    For now, you could only scroll one by one separtly.

    I suggest you express your views about adding this function on PowerApps Ideas Forum. Your precious feedback will be very helpful for our work.

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

     

     

    Best regards,

  • NSimpraga Profile Picture
    51 on at

    Any update to this issue perhaps?

  • CU22072135-7 Profile Picture
    on at
  • mustafaMAQ Profile Picture
    4 on at

    Just in case someone is still looking for this. I managed to get two galleries to scroll together. I have put two galleries inside one horizontal container. the "Aligen in container" was set to End in the gallery to the left and the one to the right was set to "Strech".

     

    Also, the height of the one to the left had the FX=" Value(CountRows(Gallery2_1.AllItems) * Gallery2_1.TemplateHeight)"

     

    i am still looking for a better way to do it, but this is working for what i was doing.

  • KarenSaunders Profile Picture
    13 on at

    Hi

     

    I am trying to resolve this, but am a little lost in your instructions.

     

    1) how to set Right Gallery to Stretch

    2) height of the one to the left had the FX=" Value(CountRows(Gallery2_1.AllItems) * Gallery2_1.TemplateHeight)" -> Is Gallery2_1 the left or the right gallery

     

    Please let me know

  • mustafaMAQ Profile Picture
    4 on at

    Hay

     

    I have modified quite a bit since that time however, the idea is still the same.

     

    for the horizontal container

     

    mustafaMAQ_0-1719525959369.png

    mustafaMAQ_1-1719526008720.png

     

    For the first gallery which is the one to the lift

     

    mustafaMAQ_2-1719526148691.pngmustafaMAQ_3-1719526193078.png

    this is "End"

    mustafaMAQ_4-1719526274020.png

    also, the height in this one is set to  Value(CountRows(Gallery2_3.AllItems) * Gallery2_3.TemplateHeight

     

    I believe this was the important part but, in case I have missed something, here is the YAML. try to paste it into an empty new screen and explore it.

     

    - Container1_4:
        Control: GroupContainer
        Variant: manualLayoutContainer
        Properties:
          BorderColor: =RGBA(202, 202, 202, 1)
          DropShadow: =DropShadow.ExtraBold
          EnableChildFocus: =false
          Fill: =RGBA(180, 204, 202, 1)
          Height: =424
          PaddingRight: =0.00
          PaddingTop: =0.00
          RadiusBottomLeft: =30
          RadiusBottomRight: =30
          RadiusTopLeft: |
            =30
          RadiusTopRight: =30
          Visible: =varTab =2
          Width: =1447
          X: =312
          Y: =500
        Children:
        - Container6_1:
            Control: GroupContainer
            Variant: horizontalAutoLayoutContainer
            Properties:
              Height: =449
              LayoutMode: =LayoutMode.Auto
              LayoutOverflowX: =LayoutOverflow.Scroll
              LayoutOverflowY: =LayoutOverflow.Scroll
              LayoutWrap: =true
              Width: =1456
            Children:
            - Gallery2_3:
                Control: Gallery
                Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0
                Properties:
                  AccessibleLabel: |+
                    =
                    Value(CountRows(Gallery2_3.AllItems) * Gallery2_3.TemplateHeight)

                  ItemAccessibleLabel: ="1"
                  Items: =Table1
                  AlignInContainer: =AlignInContainer.End
                  DelayItemLoading: =true
                  DisplayMode: =DisplayMode.View
                  Fill: =RGBA(215, 223, 240, 1)
                  Height: |
                    =Value(CountRows(Gallery2_3.AllItems) * Gallery2_3.TemplateHeight)
                  Layout: =Layout.Vertical
                  LayoutMinHeight: =800
                  LayoutMinWidth: =100
                  LoadingSpinner: =LoadingSpinner.Data
                  NavigationStep: =0
                  TemplatePadding: =0
                  TemplateSize: =80
                  Transition: =Transition.Push
                  X: =640
                Children:
                - Rectangle2_3:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Height: =Parent.TemplateHeight - Separator1_3.Height
                      Visible: =ThisItem.IsSelected
                      Width: =4
                - Separator1_3:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Fill: =RGBA(255, 255, 255, 1)
                      Height: =8
                      Width: =Parent.TemplateWidth
                      Y: =Parent.TemplateHeight - Self.Height
                - NextArrow1_3:
                    Control: Classic/Icon
                    Variant: ChevronRight
                    Properties:
                      OnSelect: =Select(Parent)
                      AccessibleLabel: =Self.Tooltip
                      Tooltip: ="View item details"
                      Color: =RGBA(166, 166, 166, 1)
                      Height: =50
                      Icon: =Icon.ChevronRight
                      PaddingBottom: =12
                      PaddingLeft: =12
                      PaddingRight: =12
                      PaddingTop: =12
                      Width: =50
                      X: =Parent.TemplateWidth - Self.Width - 12
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)
                - Title1_3:
                    Control: Label
                    Properties:
                      OnSelect: =Select(Parent)
                      Text: =ThisItem.' NCR Reporting'
                      FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
                      Height: =Self.Size * 1.8
                      Overflow: =Overflow.Scroll
                      PaddingBottom: =0
                      PaddingLeft: =0
                      PaddingRight: =0
                      PaddingTop: =0
                      Width: =Parent.TemplateWidth - 86
                      Wrap: =false
                      X: =16
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)
            - Gallery2_4:
                Control: Gallery
                Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0
                Properties:
                  Items: =Table1
                  DelayItemLoading: =true
                  DisplayMode: =DisplayMode.View
                  Height: |+
                    =5

                  Layout: =Layout.Vertical
                  LayoutMinHeight: =800
                  LayoutMinWidth: =100
                  LoadingSpinner: =LoadingSpinner.Data
                  NavigationStep: =0
                  TemplatePadding: =0
                  TemplateSize: =80
                  X: =640
                Children:
                - Rectangle2_4:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Height: =Parent.TemplateHeight - Separator1_4.Height
                      Visible: =ThisItem.IsSelected
                      Width: =4
                - Separator1_4:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Fill: =RGBA(255, 255, 255, 1)
                      Height: =8
                      Width: =Parent.TemplateWidth
                      Y: =Parent.TemplateHeight - Self.Height
                - NextArrow1_4:
                    Control: Classic/Icon
                    Variant: ChevronRight
                    Properties:
                      OnSelect: =Select(Parent)
                      AccessibleLabel: =Self.Tooltip
                      Tooltip: ="View item details"
                      Color: =RGBA(166, 166, 166, 1)
                      Height: =50
                      Icon: =Icon.ChevronRight
                      PaddingBottom: =12
                      PaddingLeft: =12
                      PaddingRight: =12
                      PaddingTop: =12
                      Width: =50
                      X: =Parent.TemplateWidth - Self.Width - 12
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)
                - Title1_4:
                    Control: Label
                    Properties:
                      OnSelect: =Select(Parent)
                      Text: =ThisItem.Department
                      FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
                      Height: =Self.Size * 1.8
                      PaddingBottom: =0
                      PaddingLeft: =0
                      PaddingRight: =0
                      PaddingTop: =0
                      VerticalAlign: =VerticalAlign.Top
                      Width: =Parent.TemplateWidth - 86
                      X: =16
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)
            - Gallery2_5:
                Control: Gallery
                Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0
                Properties:
                  Items: =Table1
                  DelayItemLoading: =true
                  DisplayMode: =DisplayMode.View
                  Height: |+
                    =5

                  Layout: =Layout.Vertical
                  LayoutMinHeight: =800
                  LayoutMinWidth: =100
                  LoadingSpinner: =LoadingSpinner.Data
                  NavigationStep: =0
                  TemplatePadding: =0
                  TemplateSize: =80
                  X: =640
                Children:
                - Rectangle2_5:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Height: =Parent.TemplateHeight - Separator1_5.Height
                      Visible: =ThisItem.IsSelected
                      Width: =4
                - Separator1_5:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Fill: =RGBA(255, 255, 255, 1)
                      Height: =8
                      Width: =Parent.TemplateWidth
                      Y: =Parent.TemplateHeight - Self.Height
                - NextArrow1_5:
                    Control: Classic/Icon
                    Variant: ChevronRight
                    Properties:
                      OnSelect: =Select(Parent)
                      AccessibleLabel: =Self.Tooltip
                      Tooltip: ="View item details"
                      Color: =RGBA(166, 166, 166, 1)
                      Height: =50
                      Icon: =Icon.ChevronRight
                      PaddingBottom: =12
                      PaddingLeft: =12
                      PaddingRight: =12
                      PaddingTop: =12
                      Width: =50
                      X: =Parent.TemplateWidth - Self.Width - 12
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)
                - Title1_5:
                    Control: Label
                    Properties:
                      OnSelect: =Select(Parent)
                      Text: =ThisItem.'Product Code'
                      FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
                      Height: =Self.Size * 1.8
                      PaddingBottom: =0
                      PaddingLeft: =0
                      PaddingRight: =0
                      PaddingTop: =0
                      VerticalAlign: =VerticalAlign.Top
                      Width: =Parent.TemplateWidth - 86
                      X: =16
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)
            - Gallery2_6:
                Control: Gallery
                Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0
                Properties:
                  Items: =Table1
                  DelayItemLoading: =true
                  DisplayMode: =DisplayMode.View
                  Height: |+
                    =5

                  Layout: =Layout.Vertical
                  LayoutMinHeight: =800
                  LayoutMinWidth: =100
                  LoadingSpinner: =LoadingSpinner.Data
                  NavigationStep: =0
                  TemplatePadding: =0
                  TemplateSize: =80
                  X: =640
                Children:
                - Rectangle2_6:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Height: =Parent.TemplateHeight - Separator1_6.Height
                      Visible: =ThisItem.IsSelected
                      Width: =4
                - Separator1_6:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Fill: =RGBA(255, 255, 255, 1)
                      Height: =8
                      Width: =Parent.TemplateWidth
                      Y: =Parent.TemplateHeight - Self.Height
                - NextArrow1_6:
                    Control: Classic/Icon
                    Variant: ChevronRight
                    Properties:
                      OnSelect: =Select(Parent)
                      AccessibleLabel: =Self.Tooltip
                      Tooltip: ="View item details"
                      Color: =RGBA(166, 166, 166, 1)
                      Height: =50
                      Icon: =Icon.ChevronRight
                      PaddingBottom: =12
                      PaddingLeft: =12
                      PaddingRight: =12
                      PaddingTop: =12
                      Width: =50
                      X: =Parent.TemplateWidth - Self.Width - 12
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)
                - Title1_6:
                    Control: Label
                    Properties:
                      OnSelect: =Select(Parent)
                      Text: =ThisItem.'Item description  '
                      FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
                      Height: =Self.Size * 1.8
                      PaddingBottom: =0
                      PaddingLeft: =0
                      PaddingRight: =0
                      PaddingTop: =0
                      VerticalAlign: =VerticalAlign.Top
                      Width: =Parent.TemplateWidth - 86
                      X: =16
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)
            - Gallery2_7:
                Control: Gallery
                Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0
                Properties:
                  Items: =Table1
                  DelayItemLoading: =true
                  DisplayMode: =DisplayMode.View
                  Height: |+
                    =5

                  Layout: =Layout.Vertical
                  LayoutMinHeight: =800
                  LayoutMinWidth: =100
                  LoadingSpinner: =LoadingSpinner.Data
                  NavigationStep: =0
                  TemplatePadding: =0
                  TemplateSize: =80
                  X: =640
                Children:
                - Rectangle2_7:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Height: =Parent.TemplateHeight - Separator1_7.Height
                      Visible: =ThisItem.IsSelected
                      Width: =4
                - Separator1_7:
                    Control: Rectangle
                    Properties:
                      OnSelect: =Select(Parent)
                      Fill: =RGBA(255, 255, 255, 1)
                      Height: =8
                      Width: =Parent.TemplateWidth
                      Y: =Parent.TemplateHeight - Self.Height
                - NextArrow1_7:
                    Control: Classic/Icon
                    Variant: ChevronRight
                    Properties:
                      OnSelect: =Select(Parent)
                      AccessibleLabel: =Self.Tooltip
                      Tooltip: ="View item details"
                      Color: =RGBA(166, 166, 166, 1)
                      Height: =50
                      Icon: =Icon.ChevronRight
                      PaddingBottom: =12
                      PaddingLeft: =12
                      PaddingRight: =12
                      PaddingTop: =12
                      Width: =50
                      X: =Parent.TemplateWidth - Self.Width - 12
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)
                - Title1_7:
                    Control: Label
                    Properties:
                      OnSelect: =Select(Parent)
                      Text: =ThisItem.'Quality Defect Description
                      FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
                      Height: =Self.Size * 1.8
                      PaddingBottom: =0
                      PaddingLeft: =0
                      PaddingRight: =0
                      PaddingTop: =0
                      VerticalAlign: =VerticalAlign.Top
                      Width: =Parent.TemplateWidth - 86
                      X: =16
                      Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the July Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
11manish Profile Picture

11manish 411 Super User 2026 Season 2

#2
Mohsin Ali Profile Picture

Mohsin Ali 338

#3
WarrenBelz Profile Picture

WarrenBelz 256 Most Valuable Professional

Last 30 days Overall leaderboard