Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 9 of 9 total
Thread Responsive Confusion
Sun, Aug 30 2015 12:32 PMPermanent Link

squiffy

Telemix Ltd.

Avatar

I'm struggling to get my head around the responsive stuff, even after following the sample project.

My form is 640 wide, and my page elements are TBasicPanels which are all 320 wide.
I want them to layout like this, using the panel layout values :

0   1
2   3
4   5
etc

So its essentially a 2 column layout that will shrink to 1 column when reduced to a phone's width.
I just simply cannot work out the right combination of consumption/overflow/reset values to make it work.

Would appreciate any help.
Sun, Aug 30 2015 1:01 PMPermanent Link

squiffy

Telemix Ltd.

Avatar

It appears to me that i need an overflow of BottomLeft which I don't have.
Sun, Aug 30 2015 1:03 PMPermanent Link

Uli Becker

> So its essentially a 2 column layout that will shrink to 1 column when reduced to a phone's width.
> I just simply cannot work out the right combination of consumption/overflow/reset values to make it work.
>
> Would appreciate any help.

Attached a small sample - hope it helps.

Uli




Attachments: Test Overflow.zip
Sun, Aug 30 2015 1:05 PMPermanent Link

squiffy

Telemix Ltd.

Avatar

*wish list * - able to edit posts Smile

Ok, first control - layoutorder 0
consumption : lcRight
Overflow : none
Position : top left
reset : true

Second control - layoutorder 1
consumption : bottomleft (for next control)
position : topleft
reset : true
overflow : depends ....

If I change the first control's consumption to bottomeleft, the next control correctly drops underneath. Thsi in my head means that I need to set the overflow of control 2 to bottomleft (as this sets the consultion of the previous control, yes?) .

But there's not bottomleft overflow option.

Have I got this right? I suppose not.
Sun, Aug 30 2015 1:26 PMPermanent Link

squiffy

Telemix Ltd.

Avatar

>> Uli Becker wrote:
>> Attached a small sample - hope it helps.


Thanks for helping.
Your example just shrinks smaller and smaller but stays 2 column. I need the right hand column to drop underneath the left hand column.
Sun, Aug 30 2015 1:31 PMPermanent Link

squiffy

Telemix Ltd.

Avatar

Ok, I se the issue with your example - the container needs to stretch to bottom right else it doesn't resize.
I'll reevaluate that Smile
Sun, Aug 30 2015 1:36 PMPermanent Link

Uli Becker

> Thanks for helping.
> Your example just shrinks smaller and smaller but stays 2 column. I need the right hand column to drop underneath the left hand column.

Of course I tested that in the IDE (not at runtime) and for me it works
as expected. When the form is sized to a Width < 640, there is only one
column left.



Sun, Aug 30 2015 1:38 PMPermanent Link

Uli Becker

> Ok, I se the issue with your example - the container needs to stretch to bottom right else it doesn't resize.
> I'll reevaluate that Smile

I see what you mean. Yes, the container is the form itself. As I
mentioned in my last post, I tried that only within the IDE where I can
resize the form.
Sun, Aug 30 2015 1:45 PMPermanent Link

squiffy

Telemix Ltd.

Avatar

Ok, being a dunce. Thanks to Uii for his example - couldn't see wood for trees...

So, just for anyone else looking, and probably an aide memoir for me in the future...
For this layout :

[ panel 1 ] [ panel 2]
[ panel 3 ] [ panel 4]
etc etc

that drops to
[panel 1]
[panel 2]
etc. when resized.

Container form :
consumption :none
Overflow : none
position : topleft
stretch : lsBottomRight (to ensure container resizes)

Left hand panels (1,3,5, etc) :
consumption : lcright
overflow : none
position : topleft
reset : false

right hand panels (2,4,6,8, etc) :
consumption : lcbottom
overflow : lcbottom.
position : topleft
reset : true
Image