[Pas2js] html widgets layout question

[Michael Van Canneyt]

On Fri, 2 Oct 2020, Mgr. Janusz Chmiel wrote:

> Dear specialists,
> 	Is it possible to use some words to specify The page layout which is
> being created by using HTMlwidgets unit? Allingment, ETC?
> Because my screen reader inform Me about Editable fields that it is in one
> line. In one big long line, that every input box is not on A separate line.
> Is it possible to overcome this? Or is it only screen reader issue, because
> input boxes are not stored at A long big line by default?
> I mean TTextInputWidget object.
> For example, when i create 35 input boxes with various labels,
> TTextInputWidget objects, screen reader inform Me, that all those object are
> stored not every input box on A separate line. But several inputboxes on A
> line.
> My goal is to have every input box on A separate line. If is it technically
> possible.
> Or is it not possible when using Htmlwidgets unit?

It is possible, but all layout must be handled using CSS or styles.

It is a design decision not to include any explicit position/size/layout properties:
in HTML, best practice is to do this through CSS classes/styles.

The TWebWidgetClass has a styles collection, in which you can add CSS
properties:

MyWidget.Styles.Add('min-height','12px');
MyWidget.Styles.Add('min-width','24em');
MyWidget.Styles.Add('max-height','24px');

etc. These styles will be applied to the HTML element when rendering the widget.

But personally, I use Bootstrap CSS to handle this: it gives good defaults for
all elements.

All you need to do is set the appropriate class names in the 'Classes' property:

MyWidget.Classes:='btn btn-primary'


The bootstrapwidgets unit contains some specialized buttons
and other controls: TRowWidget, TColWidget etc. The demobootstrap unit in
the demo uses those to produce an acceptable layout.

Michael.