How does the height="fit" work?

When you use "fit" as your value for the height attribute in a text object tag, essentially what is happening is the space that the text tag is allowing to display the value from the "text" attribute in the text object will be sized to the height needed to fit all the text you have entered. by default your text will be horizontally centered, if it looks like you have a height of zero, you may need to look at the size of the text tags parent or vertical align your text differently.

Here is a simple example with 3 text boxes. On the conduit I only see the top and bottom ones.


<wire>
<datasources>

<!-- datasources go here -->

</datasources>

<styles>

<style name="textbox" width="300" height="100" borderwidth="3" bordercolor="#ff0000" background="#7f7f7f" leftinset="20" />

</styles>

<classes>

<!-- classes go here -->

</classes>

<main>

<panel name="body" width="100%" height="100%">
<text name="block1" style="textbox" text="top text box" />
<text name="block2" style="textbox" valign="center" height="fit" text="middle text box" />
<text name="block3" style="textbox" valign="bottom" text="bottom text box" />
</panel>

</main>

<actions>

<!-- actions go here -->

</actions>
</wire>


In this example, you are already defining a height in your style, so the middle text tag is getting confused when you define a second height.

What is actually happening here is that you are trying to define a height to fit without defining a font size or font type. Since it is sizing to itself, it has no reference. While these have default values in normal situations, the fit can't discern the defaults.

I have updated the documentation to say as much. Thanks for helping me understand this.

Also note the you must define height="fit" on the text tags as it won't work in a style tag.

Here is what it could look like:

<wire>

<styles>
<style name="textbox" height="fit" width="300" borderwidth="3" bordercolor="#ff0000" background="#7f7f7f" leftinset="20" size="18" font="helvetica"/>
</styles>

<main>
<panel name="body" width="100%" height="100%">
<text name="block1" style="textbox" height="fit" text="top text box" />
<text name="block2" style="textbox" height="fit" valign="center" text="middle text box" />
<text name="block3" style="textbox" height="fit" valign="bottom" text="bottom text box" />
</panel>
</main>

</wire>