View Full Version : Designing a layout

24 Jan 2011, 3:24 AM
Hi, I'm designing and mounting a layout with Sencha Touch to a newspaper. To be used in a IPad. But, how to be perfect in a 2 views ( portrait and landscape)?
I made this, but on the landscape don't fit good.

Any Idea?


24 Jan 2011, 3:31 AM
Hi Rafaelqm.
I like your layout :)
Could you post a screenshot on how your iPad display the application in landscape view?

24 Jan 2011, 4:00 AM
The width in the boxes I'm controlling with percents. But I'm figuring out if may have another way, using the components of Ext.js.


24 Jan 2011, 8:07 AM
Have you heard of CSS Columns?

W3 Spec - http://www.w3.org/TR/css3-multicol/
CSS3.info explanation - http://www.css3.info/preview/multi-column-layout/

Basically, if you use "-webkit-column-count: 4", no matter what width the screen, the browser will resize the elements in that row to be the same. If you want a column to take place of 2 columns, use "-webkit-column-span: 2;" on that element.

The other properties I use is "-webkit-column-gap" and "-webkit-column-rule". The gap is, well, the gap between columns. The rule is basically the border. I hardly use "-webkit-column-width". If you do, then the browser will decide how many columns it can fit so it's good if you want dynamic columns based on orientation. So if you want 3 columns in portrait but 4 in landscape, this would be used and not the "-webkit-column-count" property.

24 Jan 2011, 8:24 AM
Thanks Mitchell,
I'll read the links that you sent.

After that, If left any doubts I'll ask.


31 May 2011, 1:25 PM
Did you use the CSS3 Multi Column layout ? I'm asking because I'm creating something similar for an internal company magazine and I had the same requirements/issues.

Although, after implementing multi-columns, I ran into poor performance (slow scrolling) and scrolling issues. See my forum issue at http://www.sencha.com/forum/showthread.php?135023-CSS3-Multi-Column-feature-with-scrollTo-function-does-not-appear-to-work&highlight=webkit-column-count

I'm curious how you solved your issue...


31 May 2011, 1:27 PM
I never noticed to much of a performance hit for using the CSS3 column layout but the deal breaker for me was that each column HAS to be the same width. To me, huge design problem.

31 May 2011, 1:43 PM
The performance was an issue when I had article longer than 3 pages... when 10-15 pages, it's really slow and choppy. A pain to scroll between pages. I'm not sure where the bottleneck is, is it Sencha Touch or is it the mobile browser.

Also, I think you can have have various column widths in different paragraph tags. So, certain content could be 4 columns while an image or other content is one column (even span across various columns). So, there is some flexibility.

Thanks for the feedback Mitchell.

1 Jun 2011, 2:21 PM
Do to separate layouts that query in css depending the size of the screen. Hope it helps.

1 Jun 2011, 2:43 PM
I actually fixed my issues, please see the link above to the other forum issue for details.