Controlling the web component layout

Web component sizing basics

Web components are usually complex widgets displaying detailed information, such as charts, graphs, or calendars. Such widgets are generally resizeable. Therefore, the WEBCOMPONENT form item must be large and stretchable.

Viewport zooming on mobile devices

In order to avoid automatic viewport zooming with mobile applications, consider adding a meta tag with name='viewport' in the HTML file of your gICAPI-based web components, with initial and maximal scale attributes set to 1:

<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0' />

Note: Don't use such responsive meta tag, if your web component isn't specifically designed to be responsive.

Web component size in grid-based layout

In a grid-bases layout, the item tag of the WEBCOMPONENT defines the default dimensions of the web component area:

LAYOUT
GRID
{
<GROUP g1                 >
[f1           ][f2        ]
[f3                       ]
 ...
<                         >
[f5                       ]
[                         ]
[                         ]
[                         ]
}
END

In the ATTRIBUTES section, use the SIZEPOLICY, SCROLLBARS and STRETCH attributes, to define the sizing policy of a web component field:

WEBCOMPONENT f5 = FORMONLY.mymap,
   SIZEPOLICY = FIXED,
   STRETCH = BOTH;

By default, the WEBCOMPONENT widget gets the size of the form item (like SIZEPOLICY=FIXED). When SIZEPOLICY=INITIAL, the web component is scaled to the right size after the first webpage is loaded and stays at that size. When SIZEPOLICY=DYNAMIC, the web component is resized after each load of a new webpage so that no scrollbars should appear.

Web component size layout in stack-based layout

In a stack-based layout, a WEBCOMPONENT item is defined with other items in a logical presentation order, without any size information:

LAYOUT
 STACK
  GROUP (TEXT="Chart example")
    COMBOBOX FORMONLY.chart_type, NOT NULL,
             INITIALIZER=chart_type_init;
    WEBCOMPONENT FORMONLY.chart,
                 COMPONENTTYPE = "chartjs",
                 STYLE="regular";
  END
 END
END

By default, the WEBCOMPONENT widget size will adapt to the content of the web component: It will stretch vertically to the appropriate size, in order to show the complete web component content.

To limit the size of the WEBCOMPONENT widget, you can use the HEIGHT attribute in the form definition:

WEBCOMPONENT FORMONLY.chart,
             HEIGHT = 5,        -- 5 lines
             ...

Note: If the HEIGHT attribute of the web component is defined in the form file, it fixes the widget height, which may result in vertical scrollbars inside the widget. This is like using SIZEPOLICY=FIXED for a web component in a grid-based layout.

If the HEIGHT attribute is not specified in the .per file, the front-end will take the height attribute of the HTML elements of the web component HTML file into account, for example when using a <canvas /> element:

<body>
  <canvas id="myChart" height="100px" />