> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/gum-tool/tutorials-and-examples/intro-tutorials/parent.md).
# 6 - Parent
Introduction
The Components tutorial shows how Text and ColoredRectangle instances can be sized and positioned according to the Button that they are a part of. Instances can use other instances as their parents. Gum does not place a limit to the depth of the parent/child hierarchy, enabling flexible and responsive layouts through.
Parent/child relationships are useful for
* Automatically adjusting margins and backgrounds
* Word-wrapping text relative to a parent
* Stacking objects on top of each other or side by side
* Placing objects next to other objects which are dynamically sized
* Creating tables and other complicated layout objects
## Creating a Component
For this example we'll create a Component for displaying distance. This component has two Text instances:
* ValueText - the Text instance responsible for displaying the value for the distance. For example "100".
* UnitsDisplay - the Text instance responsible for displaying the units for the distance. For example "km" for kilometers.
The two Text instances will have different colors so that ValueText stands out.
{% hint style="info" %}
A single Text instance can support inline styling. We use two text instances here to show how to work with the Parent variable, but for more info see the [Text property](/gum/gum-tool/gum-elements/text/text.md#using-bbcode-for-inline-styling) page.
{% endhint %}
To create our component:
1. Create a new component named **MeasurementDisplay**
2. Drop two Text objects in the newly-created component
3. Name the first **ValueText**
4. Name the second **UnitsDisplay**
MeasurementDisplay component
## Positioning according to a parent
Next we'll make the **UnitsDisplay** use the **ValueText** as its parent:
1. Select the **UnitsDisplay** Text instance
2. Change its `Parent` to `ValueText`
3. Change its `X Units` to `Pixels From Right`. This makes the text object positioned according to its parent's right edge
4. Change its `X` to `10` . This means the **UnitsDisplay** text is 10 units offset from the right edge of its parent **ValueText**
5. Verify its `Y` is `0`
The ValueText actual width should be based on its contents, so we'll do the following:
1. Select `ValueText`
2. Change `Width Units` to `Relative to Children`
3. Change `Width` to `0`
By setting these values, ValueText is now sized according to its children, which in this case are its letters.
You may have noticed that UnitsDisplay is also a child of the ValueText. However, since UnitsDisplay is explicitly positioned outside of the bounds of its parent ValueText, then ValueText ignores this child when calculating its own Width. For a detailed discussion of Width Units and whether children are ignored, see the [Width Units](/gum/gum-tool/gum-elements/general-properties/width-units.md#ignored-width-values) page.
## Adjusting Colors
Now that we have adjusted the position, size, and parent values on our Text instances, let's modify the color of the UnitsDisplay:
1. Select the **UnitsDisplay**
2. Change `Red` to `200`
3. Change `Green` to `150`
4. Change `Blue` to `0`
Text with changed color values
## Changing ValueText
Now that we have set up a parent/child relationship between ValueText and UnitsDisplay, UnitsDisplay automatically adjusts its position in response to changes in ValueText. Any change on ValueText resulting in the right-side of the parent changing automatically adjusts the position of UnitsDisplay.
For example, if we change the Text property on ValueText, it grows or shrinks in response.
## Width and Effective Width
As mentioned above, changing the Text property causes ValueText to grow or shrink. However, regardless of its size, the `Width` property is still set to 0.
Width is 0 despite the size being larger than 0
The `Width` variable is used in combination with its `Width Units` to calculate an *effective width.* In this case, the effective width is determined by the Text property on ValueText. It's important to note that all Gum objects have effective values for x, y, width, and height, all of which are determined by their respective *units* values.
**Children always depend on their parents' effective values rather than their explicitly set values**. Gum helps us visualize the effective values when we mouse over one of the *resize handles* on the selected object. For example, the following image shows the `Width`, `Width Units`, and effective width values of our **ValueText**.
Width is 0, Width Units is Relative To Children, effective width is 65
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.flatredball.com/gum/gum-tool/tutorials-and-examples/intro-tutorials/parent.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.