Previous Section | Next Section
forms frevvo forms use a 12 column grid for laying out controls that makes it very easy to create responsive layouts that adjust to the device. Let's try it out:
...
Drag and drop a Text control from the palette into the form. You can name it whatever you want but set the width to 6 columns. See that it takes up half the space in the form. Now, drag and drop another control to the right of this Text control. See that it also takes up 6 columns automatically. Of course, you can adjust this but is but frevvo is guessing that you're trying to create a 2-column layout. In this manner, drop several controls to the right and see that you can create a 2-column layout.
...
After a bit of experimentation, it should be easy to figure out how the grid works. Any number of controls up to a total width of 12 columns will fit next to each other in the form. You can have any combination as shown above (6+6, 4+4+4, 3+3+3+3, 2+2+8, 5+4+3 etc.). will frevvo will lay them out automatically and make sure they align nicely etc.
...
Once again, it should be intuitive and obvious after a bit of experimentation.
Mobile Devices
will frevvo will automatically alter the layout for mobile devices. Tablets have enough screen real estate that the form layout is essentially unchanged. The controls may appear different so as to look natural on the tablet but the 12-column grid layout is preserved.
Smart phones have far less real estate and will and frevvo will layout your controls as if the smart phone screen only has 4 columns. So, a total of 4 columns of width will fit on a phone (irrespective of portrait or landscape mode). If a control is wider than 4 columns, it will shrink to 4 columns. If you have a 6+6 layout, the two controls will shrink to 4 columns (i.e. take up the entire width of the screen on the phone) and be laid out one below the other. Again, the best approach to learning this is to simply try it. Click the Test button for your form after saving it. In the Test popup there are icons representing Tablet and Smart Phone. Click on them and will and frevvo will display an approximation of how the form will look on that device. Of course, to get an accurate representation, you should test on the actual device.
...