# Grow based on content

**URL:** <https://forum.inductiveautomation.com/t/grow-based-on-content/30127>\
**Category:** Ignition\
**Created:** [November 21, 2019, 12:32am UTC](https://forum.inductiveautomation.com/t/grow-based-on-content/30127 "2019-11-21T00:32:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jonathan](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@Jonathan](https://forum.inductiveautomation.com/u/Jonathan)\
**Post date:** [November 21, 2019, 12:32am UTC](https://forum.inductiveautomation.com/t/grow-based-on-content/30127/1 "2019-11-21T00:32:43Z")

</div>

In Perspective there is the concept of grow, but it is based on child components with the same container. Is there any way to set a component to grow based on content inside itself? For instance if I have buttons and one has really short text and then another has a really long text I would want the buttons to auto adjust their width based on the content.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [November 21, 2019, 3:41pm UTC](https://forum.inductiveautomation.com/t/grow-based-on-content/30127/2 "2019-11-21T15:41:37Z")

</div>

To my knowledge there’s no setting that will adjust the size (width) of a button based on text content, but you could always bind the basis (or the grow) of the component to the text value, and then transform it like this:

```auto
return str(len(value) * 8) + "px"

```

---

<div class="post-metadata">

**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\
**Post date:** [November 21, 2019, 6:07pm UTC](https://forum.inductiveautomation.com/t/grow-based-on-content/30127/3 "2019-11-21T18:07:12Z")

</div>

You can put the buttons in a flex container in ‘Row’ mode and set the flex parameters  
`grow:0; shrink: 0; base: auto;`  
With this settings, the buttons size is determined by the content width.

---

<div class="post-metadata">

**Author:** ![Jonathan](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@Jonathan](https://forum.inductiveautomation.com/u/Jonathan)\
**Post date:** [November 21, 2019, 6:09pm UTC](https://forum.inductiveautomation.com/t/grow-based-on-content/30127/4 "2019-11-21T18:09:01Z")

</div>

Thanks! I will try it out. I did not know about the secret auto value.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [November 21, 2019, 6:11pm UTC](https://forum.inductiveautomation.com/t/grow-based-on-content/30127/5 "2019-11-21T18:11:24Z")

</div>

Ah, yah, I _knew_ there was a way to do it, but I forgot about the auto setting.