Layout

General

Wisej.NET applications handle layouts on two fronts: client side and server side. The client-side layout is entirely managed in JavaScript and it is the internal layout of widgets. Server-side layout is entirely managed in .NET and it's the layout in containers.

Themes can affect both, and can break both.

Client Side

All widgets in Wisej.NET are a composition of basic building blocks. For example, a wisej.web.TextBox widget (appearance: textbox) is composed of up to 4 child components, while the wisej.web.Button widget (appearance: button) is composed with 3 child components.

In the case of the wisej.web.TextBox, the 4 child components are: the container div (the one that shows the border), the inner input element (where you type the text), and optionally 2 div containers to the left and right of the input element containing the tool buttons (appearance: toolcontainer with state editor).

In the case of the wisej.web.Button, the 3 child components are: the container div (the one that shows the color and border), the label div (the one that shows the text) and the icon img element (the one that shows the optional icon).

The internal layout, that is the relation between the child components and the container, is entirely managed in JavaScript and can be affected only by the theme. You can change the padding, margin, alignment, etc. in the theme file and don't worry about the application code since the application only "sees" the widget as a whole.

If the internal layout makes the internal components "push" the size of the container to exceed the size set by the application, or if the min/max Height and Width set in the theme clash with the sizes set in the application, the widget may either get truncated or may grow past it's application size.

Server Side

On the server you set the size and location of the controls in three ways: in the designers, fluently managed by a container, dynamically set by code.

When the location and size are "fluent", managed by the container because of docking, anchoring or a layout managed container, the Padding and Margin properties affect the positioning and sizing of the controls.

These two properties (Padding and Margin) are not linked to the margin and padding set in the theme. However, when a control is set to AutoSize, the size calculation is affected by several styles and properties set in the theme depending on the widget.

Limitations

The most important limitation to keep in mind is that a theme cannot alter the overall application layout automatically without some coding assistance.

For example, if your application has all the text fields set to a height of 24px using the AutoSize property and you load a new theme where the height is 32px, Wisej.NET will resize the text boxes to the new height but it cannot change their location unless the application was built without setting the specific position: i.e. using a FlowLayoutPanel, or a FlexLayoutPanel, or Docking and Anchoring.

Or, if panels are docked next to each other and spaced using the Margin property, changing the margin in the theme will not change the Dock layout but it may affect the client and break the layout.