# How to expand an item horizontally inside a vertical flex?

**URL:** <https://community.penpot.app/t/how-to-expand-an-item-horizontally-inside-a-vertical-flex/7263>\
**Category:** Plugins\
**Created:** [December 5, 2024, 4:25pm UTC](https://community.penpot.app/t/how-to-expand-an-item-horizontally-inside-a-vertical-flex/7263 "2024-12-05T16:25:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![CodeSXT](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/codesxt/32/6656_2.png) [@CodeSXT](https://community.penpot.app/u/CodeSXT)\
**Post date:** [December 5, 2024, 4:25pm UTC](https://community.penpot.app/t/how-to-expand-an-item-horizontally-inside-a-vertical-flex/7263/1 "2024-12-05T16:25:50Z")

</div>

I’m trying to develop a plugin to create sticky notes for my designs.

The plugin so far does the following:

- Creates a Board with a fixed square size and adds colors, shadows and so on
- Attaches a Flex Layout to it and sets it as column
- Adds Text with a specific content

But the thing I haven’t been able to do is to expand this text to use the 100% of it’s parent Board such as when one presses “FLEX ELEMENT / Widh 100%”. I could hardcode the text size with .resize() but that’s not ideal. I have tried a lot of different properties but none seems to do the job so far ☹

Can anybody help me on how to replicate that function using the plugin API?

 ![Captura de pantalla de 2024-12-05 13-25-13](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/7b7b9f24951a677142884a2c26e006df09b3c816.png)

---

<div class="post-metadata">

**Author:** ![tank666](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/tank666/32/132_2.png) [@tank666](https://community.penpot.app/u/tank666)\
**Post date:** [December 5, 2024, 5:20pm UTC](https://community.penpot.app/t/how-to-expand-an-item-horizontally-inside-a-vertical-flex/7263/2 "2024-12-05T17:20:00Z")

</div>

Change the [`horizontalSizing`](https://penpot-plugins-api-doc.pages.dev/interfaces/LayoutChildProperties#horizontalSizing) property.

```javascript
TextNode.layoutChild.horizontalSizing = 'fill';

```

In the same way you can change the [`verticalSizing`](https://penpot-plugins-api-doc.pages.dev/interfaces/LayoutChildProperties#verticalSizing) property.

> **[Text | Penpot plugins API](https://penpot-plugins-api-doc.pages.dev/interfaces/Text#layoutChild)**
>
> Documentation for Penpot plugins API

---

<div class="post-metadata">

**Author:** ![CodeSXT](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/codesxt/32/6656_2.png) [@CodeSXT](https://community.penpot.app/u/CodeSXT)\
**Post date:** [December 5, 2024, 5:48pm UTC](https://community.penpot.app/t/how-to-expand-an-item-horizontally-inside-a-vertical-flex/7263/3 "2024-12-05T17:48:29Z")

</div>

It worked! Thank you!

That was actually one of the properties I tried, but I realized that I was calling it before adding the text element as a child of the board. At that point layoutChild was null so it didn’t work. When I set that property after calling board.addChild(text) it worked perfectly.

Maybe the docs could be improved by explaining how does the layoutChild property work because “Layout properties for children of the shape” made me think of some node that was a child of the TextNode and not in the layout of the TextNode itself.