Horizontal Scroll in Vertical Gallery

[maqsoftware]

There may be a requirement of showing more columns (horizontally) like table in a vertical gallery, by default vertical gallery will not offer horizontal scroll to show more details.

But there is a workaround to achieve this. Refer below for the steps:

1. Create a horizontal container and fit it in screen. Example: Width = 500
    Set following properties: (hiding vertical scroll here as vertical gallery displays one)
    
   
   
2. Create a vertical gallery inside horizontal container with the width you are looking for. Example: 1000
   Set following properties:
    
3. Use normal container for headers in case vertical gallery to be shown like a table.
   Set following properties:
    

Tree View:

Output: 

After making above changes, horizontal container shows horizontal scroll which will look like in-built horizontal scroll in vertical gallery.

Note:

Make sure to have same width for header and gallery elements to properly aligned like a table.

[Anonymous]

Very helpful, thanks!

[ramanujama]

Thanks for sharing. This is really simple way to achieve the need.

[tu22]

Hi

i am trying to make a horizontal gallery scroll vertically. i have tried the reverse of your solution but i don't get the output i require. can you help?

[maqsoftware]

@tu22 

Thanks for reaching out us.

You can achieve Vertical Scroll in Horizontal Gallery in exactly the reverse way mentioned in the post. If not working, check the below approach:

1. Make sure you add Horizontal Gallery inside Vertical Container
   
2. Config for Vertical Container
   
3. Config for Horizontal Gallery
   

Here is the output: you can see the scrollbar 

[CLewis_Messina]

I've tried this technique with some success. Let me state, I'm very grateful for this tip. I'm trying to replicate a right horizontally scrollable financial report currently in Excel.

The problem I've run into is that the gallery can be extended infinitely to the right in theory, but appears to have a hard stop at around 1300 pix.

My parent container is screen width, and the gallery (Financials) is 10,000 pix, but as you can see from the alternately colored rows, it doesn't extend the full length.

Even odder, I can add controls (e.g. label, icon) to the gallery and move that control past that point, just not the gallery itself. I could use this to recreate the Excel sheet by making each control's (I need about 24) fill transparent, padding the left of each control to get the data lined up exactly rith, and just stacking one control atop another, but... that's crazy.

Any ideas on how to solve this one or why the gallery is the width I want, but visually, the template width hits a limit (tied to the page?)?

Thanks in advance for your brain powers trying to help!

[felix-cssc]

Thank you so much. I've achieved the result based on your simple tutorial. Appreciate your effort. I can sleep very good tonight.

[subsguts]

I have the same issue with the color not extending.  Was this ever answered?

[subsguts]

Also, I cannot get the header container to work in this way.  I've only been able to achieve if I put the gallery inside the header container.

Here's what I have now:

And here is what the screen looks like:

I've gotten this to work when the Gallery is inside Container2, but not if they are both at the same level.

If this is possible to have them at the same level please let me know what I've done wrong.  Otherwise, I have to do it with the Gallery inside the container to make it sit on top of the Gallery.

Thanks!

Update:  You have to turn the Wrap property on in Container 1 in order to the Header Container to sit above the Gallery.

Now, I just need to know why the grid lines, color, etc. stop instead of extending as was posted above by another person.  Thank you

[wonka1234]

Anyone figure out the horizontal scroll limit issue?

my container -

my gallery -

[subsguts]

How are you attempting to put something "over there" in your first screen shot?

I've found dragging doesn't work in a wide gallery, you have to do it through the X coordinates.

In addition, if you highlight a row you'll have to manually change the color on the labels that you add after a certain width as well.  Obviously a bug, but at least you can fix it by manually changing the fill color for each of the labels that are to the right of some magic width (can't remember exactly where the breaking point is).

Hope this helps

[wonka1234]

@subsguts  thanks , was able to fix with manually altering the X coordinates.

However I cannot get the header container aligned