Using the Gallery Structure for Web Application

Using the Gallery Structure for Web Application

  

Hello,


I am attempting to use the gallery structure for a web application, However it doesnt seem to be working. 

Here is the structure of the webblock I am using. 


There are 8 items in the "HazardListRecord" at the moment but all 8 are just in a row. Doesnt matter what size of screen I am using. The "HazardListRecord" source is a list with a custom (but simple) structure if that makes any difference.

Am I missing something?


Thanks

Hi,

The List Records widget has a property that, if I remember well, is called New Line Separator (or something like that). Set it to None.

Also, if your web block has something (like a container around the content) marked to fill the parent, you probably will also have this problem.

Cheers.

Thanks Eduardo,


I have changed the List Records widget property to "None" but this doesnt change it. 


The "HazardButton" webblock has the structure:

However the "SelectCard" containers have a width of 1col. and has a padding of 5px (from the "selectCard" style class) round the image. 


Any other ideas?


Hi Christopher.

I just tested and it is woorking fine: https://eduardojauch.outsystemscloud.com/GalleryTest/Home.aspx?_ts=636766794892943634

Two questions. 

1. What is the version of the platform you're using? 10 or 11 or another one?

2. Are you using a SilkUI template? London, for example, do not have the javascript in the layout of the page required to run SilkUI widgets.

Cheers.

Hello Eduardo, 

I copied my web block into your .oml and the Gallery works. 

I am using 10.0.907.0

I am using a custom theme based on LisbonTheme. The template for the screen has the "widgetsforlayout" in the page layout. Without it, the section expandable widgets do not work.

I believe the issue lies with my layout. it is a custom layout based on Layout_Lisbon. I cannot tell the difference and why it isnt working but thanks for your help. 



Solution

Hello Christopher

I would look into CSS...
Doesn't seem a problem with the Layout itself.

I am almost sure if you inspect your page with the gallery, you will see something set to width 100% in the list...

Cheers

Solution

Hello Eduardo, 

After inspecting the page and creating a near like for like within your example and my application 

it appears that the issue is with the class GalleryItem:

In your example it is set to width:50% as an element.style

Im not sure where this is in the CSS..

it appears it was something with my layout. 

referring to https://www.outsystems.com/forums/discussion/19273/silkui-is-not-defined/

When creating a custom Layout you have to set the Extended Properties 

Style = GetCssGlobalContext()+ "LisbonTheme"

I only had 

Style = "LisbonTheme"

and changing that has fixed the issue. 

Christopher Kennedy wrote:

it appears it was something with my layout. 

referring to https://www.outsystems.com/forums/discussion/19273/silkui-is-not-defined/

When creating a custom Layout you have to set the Extended Properties 

Style = GetCssGlobalContext()+ "LisbonTheme"

I only had 

Style = "LisbonTheme"

and changing that has fixed the issue. 

Nice. This is a CSS problem, related to a layout thing xD