Snaking Columns in List set at 50%

[mastermind315]

I have trying to setup a list (Fill Container checked) to display its content in a snaking column layout to show 2 columns centered in the screen, but I've been forced to put a 42% in the item size because when I put 50% it only displays 1 column, it looks ok in a Galaxy Note 3, but when trying in other devices, Ipad, Iphone it is not looking right, how do I accomplish that, to have a centered list with 2 columns and looks perfedct in any device. I thought that setting the item size at 50% and the list to be fill container checked it willl automatically distribute the columns equally and fit in the screen.

[lgrupido]

Re: Snaking Columns in List set at 50%

First of all: good luck getting ANYTHING to look perfect in any device.

Having said that, more info would be helpful:

Is each column just a single field?

What are your flex values of your fields?

What CSS are you using?

Are you sure there are no margins setup around the columns?

I am unclear whether you are saying that 50% works perfectly in Galaxy 3 or if it's just 42% that works perfectly in Galaxy 3 (and the others don't work no matter what.)

Is there a difference in how it looks portrait vs landscape?

[mastermind315]

Re: Snaking Columns in List set at 50%

the column contains 2 fields, an image and a text and kt has some html to make the text in front of image in the bottom part of the image. All that is contained in a div, but no padding nor margin. Size of image us set to be 100% width and below the snaking property where it says item size I tried 50% , but then because I was not getting the desired result changed it to 42% to at least get 2 columns in portrait mode in the galaxy note 3. There it looks ok, but when I try it in the Ipad I am getting a lot of space in the right size and Im sure it is because of that 42%.

[peteconway]

Re: Snaking Columns in List set at 50%

This works for ViewBox and List

In the css of the List or View box use this css

.snakingItem {
width: 23%;
float: left;
height: 1.1in;
white-space:nowrap;
overflow:hidden;
align: center;
box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box;
}
@media (max-width: 700px){
.snakingItem { width: 48%;}
}
@media (max-width: 400px){
.snakingItem { width: 98% ;}

In the freeform area this type of attribute..

<div class="{dialog.style}ListItem {dialog.style}ListItem snakingItem" style="width: 130px; height: 200px; text-align: center; background-color: #fafafa;" a5-item="_AARow" a5-value="{AControlField}"><div>

The Field You want to display here..

</div></div>

[mastermind315]

Re: Snaking Columns in List set at 50%

Hi Pete, thanks for replying, somehow I can't get the result, right now this is the code I am using in the free form List Layout:

<div align="center" style="position:relative; margin:-8px;">

<div>{Imagecat}</div>

<div style="position:absolute; bottom:0%; background-color:#aaaaaa; text-align:center; width:100%; border-bottom-left-radius:10px; border-bottom-right-radius:10px;">{Categoria}</div>

</div>

In the Item Width in the List Properties I have 150px, if I put 50% it only displays one column instead of the desired 2.


and this is the result
Screenshot_5.png

As you can see they are not centered (right now because they are fixed at 150px, but using 50% it is not working neither , what I want is to get 2 equal columns centered in the panel to fit in any screen of any device in portrait mode.