# AutoSizing

Many Wisej.NET controls expose the **AutoSize** property, and when the control is also a [container ](#containers)(i.e.: Panel, FlowLayoutPanel, TableLayoutPanel, FlexLayoutPanel, UserControl, GroupBox, Form, etc) it also has the **AutoSizeMode** property.

The auto-sizing of the control is performed on the server using the content of the control, the current font, and the value of the layout properties **Dock** and **Anchor**.

{% hint style="danger" %}
Complex layouts, when a container auto-sizes based on its children and the children are either docked or anchored to the same container, may cause a circular layout arrangement. Wisej.NET is able to handle most of these cases, but it may cause problems or complex reflows under certain circumstances.
{% endhint %}

## Labels

Labels are always created in the designer with **AutoSize** = *true*, but when you create a label by code, the **AutoSize** default value is *false*.

![](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-388966c136e70b8740bec7be36984e8e143e0d89%2Fimage.png?alt=media)

When **AutoSize** is true, the designer will not show the grab handles used to resize the control. When you change the content, the padding, or the font, the size of the label will grow to fit the text.

{% hint style="danger" %}
Autosizing is not supported when **AllowHtml** is *true* since it's not possible to accurately measure HTML text on the server. See [HTML Autosizing](#html-autosizing).
{% endhint %}

When the label is anchored or docked to the parent, the auto-sizing system grows the label horizontally and then vertically when the anchoring or docking limits the horizontal size.

![AutoSize labels anchored left and right in a Panel.](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-e8cac3c8fc1b1bea72bcec0253a990f7264c10e0%2Fimage.png?alt=media)

Line height or anything that changes how a font is rendered from the standard is not supported when autosizing. Use [TextUtils](https://docs.wisej.com/api/wisej.base/general/wisej.base.textutils) instead.

Here's an example of a label with a custom line height:<br>

```csharp
Label label1 = new Label();
label1.Text = "This \nis a \nmultiline \nlabel";
label1.CssStyle = "line-height: 36px;";
Controls.Add(label1);
```

\
Here's how to use TextUtils to measure the size and set the size of the label. Note that the `\n` in the text of the label was changed to `<br>`

```csharp
s = "<div style='line-height: 36px;'>" + "This <br>is a <br>multiline <br>label" + "</div>";
label1.Size = await TextUtils.MeasureTextAsync(s, true, label1.Font);
```

## Buttons

Buttons are always created in the designer with **AutoSize** = *true*, but when you create a button by code, the **AutoSize** default value is *false.*

The auto-sizing rules are the same used by the [Label ](#labels)control. However, the Button control also implements the **AutoSizeMode** property (like a container). By default, the **AutoSizeMode** property is set to *GrowOnly*, which means that the button will grow to fit the content but will not shrink smaller than the initial size. When **AutoSizeMode** is set to *GrowAndShrink*, the button will shrink to the minimum size necessary to fit the content.

## Editors

All [editor ](https://docs.wisej.com/docs/controls/editors)and [list controls](https://docs.wisej.com/docs/controls/lists) expose the **AutoSize** property. However, only the editors (TextBox, DateTimePicker, ComboBox, etc) are created in the designer with the **AutoSize** property initialized to *true*. When you create these controls by code, the **AutoSize** property is always initialized to *false*.

Additionally, the height of the editors is set in the theme. Wisej.NET will use the height in the theme as the minimum height when calculating the auto-sizing dimensions.

![DateTimePicker and ComboBox with and without AutoSizing.](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-c18815adf17dd12adaab4e69ace74ab13d8cfca4%2Fimage.png?alt=media)

## Containers

Auto-sized containers behave differently from auto-sized labels, buttons, and editors because they calculate their preferred size by fitting all their children, which in turn may also have the **AutoSize** property set to *true*, and may be docked or anchored to their container, in a multi-level layout.

Containers expose the AutoSizeMode property to control whether the container can shrink below its original size. By default, the **AutoSizeMode** property is set to *GrowOnly*, which means that the container will grow to fit the content but will not shrink smaller than the initial size. When **AutoSizeMode** is set to *GrowAndShrink* the container will shrink to the minimum size necessary to fit the content.

{% hint style="danger" %}
A container in the designer may shrink to a size of 0,0 when using **AutoSize**=*true* and **AutoSizeMode**=*GrowAndShrink*. In this case, you can select the container using the document outline, or by dragging the pointer around it to "catch" the control.
{% endhint %}

![Panel with AutoSizeMode=GrowAndShrink](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-4c932d539218d58a7f6298f01fc1bf0a1b4920c3%2Fimage.png?alt=media)

{% hint style="info" %}
You can mix **AutoSize**, **MaximumSize**, and [**AutoScroll** ](https://docs.wisej.com/docs/controls/general/autoscroll)to allow a container to grow to fit its content until it reaches the maximum size and then to show the scrollbars.
{% endhint %}

## Maximum and Minimum Size

All Wisej.NET controls expose the **MaximumSize** and **MinimumSize** properties. They control the maximum and minimum size of a control, regardless of the control's **Dock** or **Anchor** or **AutoSize** values. The minimum and maximum sizes are always enforced.

You can specify only the *width* or only the *height* in either the **MaximumSize** or **MinimumSize** properties. Leaving the *height* or *width* set to 0 indicates that it should be ignored.

## :warning:HTML Autosizing

Wisej.NET cannot properly auto-size a control when the **AllowHtml** property is set to *true*. It is impossible to measure HTML content on the server. However, you can use the **Wisej.Base.TextUtils** class to request a correct measurement from the browser:

{% tabs %}
{% tab title="C#" %}

```csharp
TextUtils.MeasureText("<big>H</big>ello!", allowHtml: true, this.Font, (size) =>
{
	this.button1.Size = size;
});
```

{% endtab %}

{% tab title="VB.NET" %}

```visual-basic
TextUtils.MeasureText("<big>H</big>ello!", True, Me.Font,
					  Sub(size As Size)
						  Me.button1.Size = size
					  End Sub)
```

{% endtab %}
{% endtabs %}

The alternative asynchronous version, without the callback method, is:

{% tabs %}
{% tab title="C#" %}

```csharp
this.button1.Size = 
await TextUtils.MeasureTextAsync("<big>H</big>ello!", allowHtml: true, this.Font);
```

{% endtab %}

{% tab title="VB.NET" %}

```visual-basic
Me.Button1.Size =
  Await TextUtils.MeasureTextAsync("<big>H</big>ello!", True, Me.Font)
```

{% endtab %}
{% endtabs %}

## Advanced

The auto-sizing system (when the **AutoSize** property is *true*) asks each auto-size control to calculate its preferred size and uses that size to calculate the auto-size.

To implement your own modified auto-sizing calculation, simply override the **GetPreferredSize(proposedSize)** method and return a new **Size**. In the override, you may also calculate your own proposed size and then pass it to the base implementation of GetPreferredSize().
