Bootstrap like layout policy

[dewets]

Hi there,

SC Version: v10.0p_2015-06-30/Enterprise Deployment
Browser: Latest Chrome

We require a layout that behaves like Bootstrap's 12 column fluid grid layout. The closest parralels I could find was the tile layouts with the fit and flow policies, these were not quite adequate. They wrap content at the end to the next row and dont really have the flexibility of the virtual 12 column paradigm.
I tried wrapping some of Bootstrap's CSS and using HTMLFlow and Canvas.getInnerHTML and then using Bootstrap css inside that but it seems that some of the css just doenst work well within the smartclient eco system of css.

Is there perhaps a container layout policy that I have missed? Is there a way to use Bootstrap constructively in SmartClient?

PS: Split panes are not really applicable here either since the different blocks of information in question here are not really related in anyway (parent-child relationships)

Thanks in advance
De Wet

[Isomorphic]

We're not sure why you would consider a 12-column layout to be more flexible than layouts that don't make such assumptions :)

Rather than referring to Bootstrap, which uses a 12 column virtual layout as a hack to support older IE, just describe your layout needs and we'll point to the right approach.

[dewets]

Im looking to achieve this sort of behaviour: https://jsfiddle.net/n4rzul/msrgxfru/ resizing the availble area reflows the content to the next line in a elastic way (still fills the entire width of the available space)

[dewets]

Also the ratio/percent of the width that a block(or group of blocks) takes up can be specified.

[Isomorphic]

We're not getting much from your JSFiddle, it doesn't respond to browser resize in the way you describe. Maybe it doesn't work on some browsers.

A FlowLayout will wrap arbitrary-sized widgets on to the next line when there's not enough horizontal room. However, as a general comment, the type of layout you're looking for is somewhat typical of a web *site* that consists principally of non-interactive content; its far less commonly used for a web *application* that consists of interactive components.

What set of components are you working with here where a layout like this seems to make sense? We might be able to suggest a better design.

[dewets]

If the example was just in a plain html document you'd get the behaviour im looking for by resizing the browser.
For the JSFiddle example dont resize the browser, resize the panel that the content is in :)

The content that I am displaying is information about a company and is very website like. Logo, some key value pair type fields, a description, etc. I need this information to display sanely in both a desktop brower environment as well as mobile.

[dewets]

FlowLayout will just wrap whatever block/tile can no longer fit on the end and put it on the next line, but after that has happened you will be left with unused space to the left of both row1 and row2 making the left edge of the content jagged instead of making those blocks/tiles always stretch to fill the available width of the current container. Think justified text vs unjustified :) Below is an example (more or less). appologies for my bad mspaint skills :)

[Isomorphic]

It looks like your JSFiddle alternates between everything-on-separate-lines vs two lines based on a fixed pixel width threshold, with no attempt at autosizing. If we haven't missed anything, this is pretty straightforward: have a Canvas container that places subcomponents either into one VStack (everything on separate lines) or an HLayout and a single element in a VStack, depending on the container's width. Use the Resized notification to switch between the two possible layouts on the fly, as the container is resized.