# Large Text in Coordinate Container Overflow

**URL:** <https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 3, 2021, 12:18pm UTC](https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035 "2021-03-03T12:18:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![deon.korb](https://avatars.discourse-cdn.com/v4/letter/d/8c91f0/32.png) [@deon.korb](https://forum.inductiveautomation.com/u/deon.korb)\
**Post date:** [March 3, 2021, 12:18pm UTC](https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035/1 "2021-03-03T12:18:18Z")

</div>

Hi,

I’m trying to place large letter in a coordinate container to use as a kind of watermark.

It seems as if this causes the container to overflow vertically at some point prior to actually exceeding the dimensions. If either the label is big or the text size is larger than some point, the coordinate container wants to scroll.

See below:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/d/8d6d02ac97b1b34ffdf0ed9e2277eb34b6c6e4a9.png)

View definition:

```auto
{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 600,
      "width": 600
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "height": 507,
          "width": 581
        },
        "props": {
          "style": {
            "fontSize": 500,
            "textAlign": "center"
          },
          "text": "00"
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

```

How can I make a label display digits about as large as the parent container without causing overflow?

Regards,  
Deon

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 3, 2021, 1:10pm UTC](https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035/2 "2021-03-03T13:10:11Z")

</div>

Set the style.overflow on the coord container to hidden

---

<div class="post-metadata">

**Author:** ![deon.korb](https://avatars.discourse-cdn.com/v4/letter/d/8c91f0/32.png) [@deon.korb](https://forum.inductiveautomation.com/u/deon.korb)\
**Post date:** [March 3, 2021, 4:14pm UTC](https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035/3 "2021-03-03T16:14:11Z")

</div>

I can’t do that. I want to be able to scroll when there are actually components outside the view. I just don’t want the label to cause the overflow prematurely

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 3, 2021, 5:33pm UTC](https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035/4 "2021-03-03T17:33:00Z")

</div>

Make the coordinate container use relative sizing, and make your label 100% width?

---

<div class="post-metadata">

**Author:** ![deon.korb](https://avatars.discourse-cdn.com/v4/letter/d/8c91f0/32.png) [@deon.korb](https://forum.inductiveautomation.com/u/deon.korb)\
**Post date:** [March 3, 2021, 6:33pm UTC](https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035/5 "2021-03-03T18:33:42Z")

</div>

Same result. It is like the text extends beyond the label dimensions. Same thing happens in width, but seemingly much earlier in height:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f1acd67987c4cad642ede02f702dd6bd5af47137.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/3/0373659830050f35155f2a3c43af0e002dba9e93.png)

I tried the `textOverflow:clip`, but that had no effect.

Anything else I can try?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 3, 2021, 6:42pm UTC](https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035/6 "2021-03-03T18:42:20Z")

</div>

Oh, right. It’s the other problem. Fitting text to size inside a container is hard/impossible without Javascript:

> **[Fitting Text to a Container](https://css-tricks.com/fitting-text-to-a-container/)**
>
> There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies

What you _can_ do inside Perspective easily is put your text into an SVG - then the SVG can scale the text for you.

---

<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:** [March 3, 2021, 6:46pm UTC](https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035/7 "2021-03-03T18:46:18Z")

</div>

This is happening because the actual text is taking up more space than you are allowing for. In your View, you are allowing a height of `0.875`%, but the Label actually “requires” more than 800 pixels of height when the text is set to 600. You can adjust the dimensions all you want, but behind-the-scenes that Label is going to take up that much space.

 ![Screen Shot 2021-03-03 at 10.43.22AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/15db769045a5540b93e75dd9035c17c2fda2c1d2.png)

---

<div class="post-metadata">

**Author:** ![deon.korb](https://avatars.discourse-cdn.com/v4/letter/d/8c91f0/32.png) [@deon.korb](https://forum.inductiveautomation.com/u/deon.korb)\
**Post date:** [March 3, 2021, 6:58pm UTC](https://forum.inductiveautomation.com/t/large-text-in-coordinate-container-overflow/44035/8 "2021-03-03T18:58:11Z")

</div>

Thanks, I’ll try the SVG.

Else I’ll just keep the label small enough to fit
