Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
createlayout [2018/07/02 09:44]
aducomadmin [Rows and Columns]
createlayout [2019/09/02 11:49] (current)
aducomadmin
Line 10: Line 10:
  
   - Area   - Area
-      * The Area component will generate a simple ​<div></​div> ​pair, but will follow the Bootstrap rules of 12 units.+      * The Area component will basically ​generate a simple ​'div' ​pair
   - Panel   - Panel
       * The Panel component will generate a bootstrap panel/card class, which causes a default border space around and within that panel. The panel can have a header which is a separate component that you can put on the panel.       * The Panel component will generate a bootstrap panel/card class, which causes a default border space around and within that panel. The panel can have a header which is a separate component that you can put on the panel.
  
 +the main difference is that Area is a html component where Panel is a bootstrap component. Therefore it is recommended to create your responsive forms based upon a Panel.
  
 ===== Rows and Columns ===== ===== Rows and Columns =====
  
-To make use of the grid system ​you can define ​rows and within the rows columns ​(which can contain new rows etc.). Each row will be presented below each other. Columns willl break depending ​on the grid settings.\\ +To create a responsive layout add a panel on the form (and a panel header if you need). Add rows and columns ​by adding components from the component bar on the form, or add in bulk by performing a right mouseclick on the panel and select 'add rowsadd colums, add grid'. Then small windows will appear to bulk add a number of rows, columns, or rows with columns.
-Within ​the IDE you are able to move rows and columns to get another sequence. Alsoif you are on valid parent component you can add rows, columns ​of a full grid by a few mouseclicks.+
  
 +To make use of the grid system you can define rows and within the rows columns (which can contain new rows etc.). Each row will be presented below each other. Columns willl break depending on the grid device settings.
 +
 + \\ Within the IDE you are able to move rows and columns to get another sequence. Also, if you are on a valid parent component you can add rows, columns of a full grid by a few mouseclicks.
  
 ===== Visual Components ===== ===== Visual Components =====
  
-Within a column you can put different components for showing data or doing your input.+Within a column you can put different components for showing data or doing your input. Although it is not forbidden to put components elsewhere, it is important to understand and follow the bootstrap grid design pattern as described in the bootstrap documentation. Therefore do **not** ​ put components on rows, but only in columns. You can add more visual components on a single column. 
 + 
 +==== Visual Component properties ==== 
 + 
 +There are several properties involved in regards to layout. At raw level you can use the class property. Within this property you can assign a full css to your application. Most for specialists. Another property is the style property. This will allow you to apply graphic properties in a menu-wise editor. It will generate css code for shading, borders etc. Finally there are properties that directly influence the look and feel of your application. I.e. textcolor, border, padding etc. The main thing that is important is to be consistent. In general we advise to use the properties where possible and to use the class property for the layout elements that cannot be accessed by the regular properties. If that is not sufficient, use the style property. In general, most of your wishes can be achieved by the direct properties and class property. 
 + 
 +==== Device context ==== 
 + 
 +The device contexts describes the '​breaking'​ of your application if it is displayed on a regular monitor, a laptop, tablet or phone. It might have influence on spacing of objects. It is common habit to put labels of fields above the field and not before. The reason is that applications are created within the context of '​mobile first'​. If you know that your application is only used on large screens, you might have different desire. 
 + 
 +As soon as you apply a device property, the component becomes a bootstrap component and will behave the bootstrap way. That can bring supprises regarding to layout as sometimes, spacing between objects or within an object (padding and margin) are set double because the owning component (the column) also has already default margins and paddings. 
 + 
 +In the beginning this might be a bit confusing as you have to play with the settings to get used to the bootstrap system. But if you follow the following rules then this might be a good start for you: 
 + 
 +  * Start with a panel and set the containerclass to container-fluid_p-0;​ deviceclasses to 12. This will create a panel with no padding over the full available width. Set padding to p-3 to allow a basic padding to the inner bootstrap grid. 
 +  * Add rows and columns, set the column device classes to the rules you want it to break on different divices. I.e. 3 columns on large devices, 2 on medium and 1 on small (would be represented by 4, 6 and 12). Set padding to p-3. Set gutter to no on rows. 
 +  * Add your fields. **Do not apply a device class.** ​ If it contains a value, then change it to empty. 
 + 
 +This is a good basic approach for a simple form. If rows need to show spaces you have the option to add a topmargin. This way you can create a small space between the top of your browser and the form; or influence the space between two rows. Again, the main difference here is that topmargin reflects in a standard css way of defining layout where '​gutter'​ and '​p-x'​ are bootstrap defines.