Web component 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" />