Responsive Layout

How-to Discussions
1

Hi,

how is it possible to create a responsive layout? For example to define a grid layout with different columns at different resolutions. Or to define a fix navigation panel at bigger screens and have an navigation button at smaller screens.

Any ideas or examples?

2

Hi!

Yes it is possible to achieve this :slight_smile: Have a look at the WhileWindow* triggers https://www.fusetools.com/learn/fuse#viewport-triggers

3

There is also a ColumnLayout option which can be helpful for simple responsive layouts, for example showing images.

   <ColumnLayout ColumnSize="200"/>
   <Each Items="{items}">
       ... display item ...
   </Each>
</Panel>

This will create a number of vertical columns and populate the items as they fit. As the screen gets narrower there will simply be fewer columns.

4

I thanks for these solutions. I will give it a try.

Is it also possible to check these triggers in javascript?

5

Tobias Kahl: you can do a <Callback Handler="{js_func}" /> in any trigger.

6

Hi Mr Lassen,

i have just tested your callback solution. as i noticed these callbacks are only called when the aspect is changing. But how do i detect the initial aspect, when the aspect has not changed, yet?

7

If you add Bypass="Never" to a trigger then it will also trigger for its initial state.

E.g. <WhileWindowLandscape Bypass="Never">