# Embedded View Overflow Visible

**URL:** <https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [November 8, 2021, 1:38pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830 "2021-11-08T13:38:33Z")\
**Posts on this page:** 14\
**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:** [November 8, 2021, 1:38pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/1 "2021-11-08T13:38:33Z")

</div>

Hi,

I’m having strange behaviour with embedding a view into a coordinate container and having it’s overflow visible by default.

The view has it’s own overflow set to visible:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a8d0ef0380851406252a9bbaf1427928597a420d.png)

When I embed this view into another container, it appears with scrollbars:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/e/cecd0d0bd40556d83f90b607e030eea6a91febb8.png)

If I add `overflow:visible`, it behaves correcly, as the other examples show.

Views attached.[Overflow.zip](https://forum.inductiveautomation.com/uploads/short-url/tCR2CjGCavBXQIarzQTH7hFnge6.zip) (9.0 KB)

Is this expected behaviour? It would really cumbersome to have to add this key every time a symbol is added to a mimic, negating the convenience of drop config.

This is currently on 8.1.11.

Regards,  
Deon

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 8, 2021, 1:50pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/2 "2021-11-08T13:50:59Z")

</div>

This can happen when you are using irregular fixed sizes and drop it into a flex/percent container. Its probably rounding it a bit wrong causing it to enter overflow state.  
This is expected behaviour tho

Try putting overflow hidden on the view, that way it should not cause an overflow when embedded.

---

<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:** [November 8, 2021, 2:38pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/3 "2021-11-08T14:38:10Z")

</div>

I’m deliberately placing the label outside the view dimensions and actually want the overflow to be visible by default. It is only visible after adding overflow:visible to the embedded view.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 8, 2021, 2:48pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/4 "2021-11-08T14:48:40Z")

</div>

You can change the default behaviour of embedded views with theme.css (or injection)

Which will cause all the embedded views to have overflow visible… You will not easily be able to ever anywhere change it back to have a different overflow tho… so i cant recommend this.

`.view-parent{overflow:visible !important}`

(inject into background image of a style class no need apply the style)  
`}.view-parent{overflow:visible !important}{`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/8/58dc71cbe9427346d04cc056cfa49912cd6fa964.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e72ab5eeb656e03d42a45f401f1121f021f80ecc.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 8, 2021, 2:54pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/5 "2021-11-08T14:54:27Z")

</div>

If you do this i reccommend creating a style class named  
“childEmbeddedOverflow” (or something)

and then use this instead and put this class on the containe of your view with all the embdedded stuff in. This way it will only apply in this container  
`}.psc-childEmbeddedOverflow .view-parent{overflow:visible !important}{`

---

<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 8, 2021, 3:39pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/6 "2021-11-08T15:39:41Z")

</div>

> [@deon.korb](#):
>
> Is this expected behaviour?

Yes, this is expected. You're setting properties for a View, but those settings aren't set on the Embedded View, nor are they inherited from whatever View is instanced/embedded. So what you're encountering is an unfortunate consequence of every component defaulting to `overflow: auto`.

---

<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:** [November 9, 2021, 6:25pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/7 "2021-11-09T18:25:15Z")

</div>

Is there any way to change the default behaviour to visible?

---

<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 9, 2021, 6:32pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/8 "2021-11-09T18:32:14Z")

</div>

At this point that would be a backwards-breaking change, and could potentially have large impact on existing projects. I’ll discuss with Dev to see if we should modify this behavior for 8.2.0.

---

<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 9, 2021, 7:22pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/9 "2021-11-09T19:22:23Z")

</div>

I discussed this with one of the Devs, and we have a solution which stems form two open features:

1. We have an open feature which would allow for users to create their own custom component variants within the component palette.

2. We also have an open feature that would allow users to specify component variants as a drop target.

These two features in tandem would allow you to specify an “Overflow Visible” variant of the Embedded View component, and then specify that variant as the drop target for your UDT. These features are not guaranteed for 8.2.0, but neither would result in a backwards-incompatible change, and so they could actually be added at any time without impacting anyone. I’ll link this forum post in the two features.

---

<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:** [November 10, 2021, 5:38am UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/10 "2021-11-10T05:38:10Z")

</div>

That sounds perfect

---

<div class="post-metadata">

**Author:** ![Ali\_Ali](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ali\_Ali](https://forum.inductiveautomation.com/u/Ali_Ali)\
**Post date:** [August 27, 2024, 10:52am UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/11 "2024-08-27T10:52:54Z")

</div>

Hi @victordcq. Thank you for your recommendation. I know it's an old post, but I was trying to achieve the same thing and your reply was a life saver for me.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 27, 2024, 11:55am UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/12 "2024-08-27T11:55:47Z")

</div>

you can use advanced stylesheet.cs too now instead of having to inject css into classes

---

<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:** [October 25, 2024, 11:23am UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/13 "2024-10-25T11:23:52Z")

</div>

Was this implemented for 8.3?

---

<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:** [October 28, 2024, 3:00pm UTC](https://forum.inductiveautomation.com/t/embedded-view-overflow-visible/52830/14 "2024-10-28T15:00:25Z")

</div>

No. To my knowledge, there is no intent on getting this into 8.3.0, though it could of course be added at any time after 8.3.0.
