# 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.

{% hint style="danger" %}
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.
{% endhint %}

### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/theme-builder/concepts/layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.