Features / Usability

Posted by Torsten Fabricius 31 Mar 2015 17:22 GMT-0000 posts: 1563

Hi Omniscient03,

adding to Rick: Right until Tiki 12 ...
... if you work with one of the newer Bootstrap based versions (Tiki 13+) you should consider to not use a fixed width parameter to the DIV, but to use instead a flexible Bootstrap grid parameter.

The Bootstrap grid is a "12grid" system, so your colums may be:

1+3+5+1+4 or 3+3+3+3 or 4+4+4 or 6+6 or 12 or 8+2 and so on

For one table for 100% of the content space: one row 12 with ...

{DIV(class=row)}
{DIV(class=col-md-12)}

{FANCYTABLE()}

...

{FANCYTABLE}
{DIV}
{DIV}

For some content besides the table - let's say 1/4 of the width:

{DIV(class=row)}
{DIV(class=col-md-9)}

{FANCYTABLE()}

...

{FANCYTABLE}
{DIV}
{DIV(class=col-md-3)}

some content right besides the FANCYTABLE

{DIV}
{DIV}

The "md" in the middle of the column class ("col-md-9") stands for the breakpoint relative to the viewport (see aswell "Breakpoints and MediaQueries").

At tis point the rows switch from besides each oter to below each other ... .
In Bootstrap we have "lg", "md", "sm", "xs"
"xs" never switches, even not on extra small portrait of 480px wide smartphones.
"sm" is related to a mediaquery that let you see more than one coĺumn besides each oter on small (narrow) but not on extra small screens. In oher words: sm columns switch below each other when a screen is narrower than 768px.
"md" is wider than the usual width of a tablet in landscape mode. Breakpoint here is 992px.
Columns with "lg" will only be besides each other on large screens wider than 1200px.

When you try wit a desktop or a laptop, you can narrow the width of the browser and thus you can see the effect, when columns "jump" under each other, when the screen width get smaller.

so:

class=col-md-3 

means about:

this class 
is to create a column with a breakpoint md at 992px and a width of 3/12