# \[IGN-1368\]Scroll bars appearing on embedded carousel view

**URL:** <https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 25, 2020, 10:26pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975 "2020-11-25T22:26:18Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 25, 2020, 10:26pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/1 "2020-11-25T22:26:19Z")

</div>

I'm missing some concept here (I hope).

Following on from my previous question, [Single tag, tag-drop Perspective template - #2 by cmallonee](http://forum.inductiveautomation.com/t/single-tag-tag-drop-perspective-template/40726/2), I have created a coordinate view as shown below. (The pink background is just to show the extents of the view when used.)

 ![Perspective coordinate view 1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/b/9b14394242ff9197b69b52da97680f39f15498cc.png)!  
When I tighten up the container height scroll bars appear. None of the components extend outside the container.

![Perspective embedded view 1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/f/af29d4dd69087131a29ccc40bff95fab0cf00b3e.png)!  
When I use the template as an embedded view the scroll bars appear there too.

I don't understand what the relationship between the template size and the root container is.

Can anyone explain?

---

<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 26, 2020, 12:11am UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/2 "2020-11-26T00:11:18Z")

</div>

Without having more insight into the construction of the View/container, w won’t be able to help you much. There’s a lot of interplay between defined heights in components, embedding, and even quality overlays. If you’re able to send me the view in question (just the view.json file) I could look at it and get back to you.

---

<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:** [November 27, 2020, 2:34am UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/3 "2020-11-27T02:34:10Z")

</div>

It will certainly help you to know the cause and to fix it, but I set my flex containers now to props.mode = hidden to stop components with quality overlays shown from showing scrollbars.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 27, 2020, 7:12pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/4 "2020-11-27T19:12:49Z")

</div>

Thank you. Here’s the view’s JSON.

```auto
{
  "custom": {},
  "params": {},
  "props": {
    "dropConfig": {
      "dataTypes": [
        {
          "action": "path",
          "param": "tagName",
          "type": "String"
        }
      ]
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "EmbeddedView_1"
        },
        "position": {
          "x": 96,
          "y": 444
        },
        "propConfig": {
          "position.height": {
            "binding": {
              "config": {
                "path": "this.props.useDefaultViewHeight"
              },
              "type": "property"
            }
          },
          "position.width": {
            "binding": {
              "config": {
                "path": "this.props.useDefaultViewWidth"
              },
              "type": "property"
            }
          },
          "props.params.tagPath": {
            "binding": {
              "config": {
                "fallbackDelay": 2.5,
                "mode": "direct",
                "tagPath": "[default]MyFolder/Counter1.path"
              },
              "type": "tag"
            }
          }
        },
        "props": {
          "path": "MyComponents/tpLabelView",
          "useDefaultViewHeight": true
        },
        "type": "ia.display.view"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

```

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 27, 2020, 7:22pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/5 "2020-11-27T19:22:05Z")

</div>

Thanks, Nick, but the only place I can find the “mode” is in the [XY]root where I have the options “Fixed” and “Percent”. That makes me think that we have different view structures. Can you outline yours for us?

---

<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 27, 2020, 7:54pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/6 "2020-11-27T19:54:01Z")

</div>

@Transistor: what you provided is not helpful at all because it does not provide insight into the components in the “template”. Please provide the view.json file of the “template” View.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 27, 2020, 8:32pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/7 "2020-11-27T20:32:22Z")

</div>

Sorry, but I misread your instructions. Here you go.

```auto
{
  "custom": {},
  "params": {
    "tagPath": "MyTagPath"
  },
  "propConfig": {
    "params.tagPath": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 53,
      "width": 573
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "lbCaption"
        },
        "position": {
          "height": 32,
          "width": 319.00000000000006,
          "x": 12,
          "y": 11
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "fallbackDelay": 2.5,
                "mode": "indirect",
                "references": {
                  "tagPath": "{view.params.tagPath}"
                },
                "tagPath": "{tagPath}.name"
              },
              "type": "tag"
            }
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "lbReadout"
        },
        "position": {
          "height": 32,
          "width": 97,
          "x": 338,
          "y": 11
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "fallbackDelay": 2.5,
                "mode": "indirect",
                "references": {
                  "tagPath": "{view.params.tagPath}"
                },
                "tagPath": "{tagPath}.value"
              },
              "type": "tag"
            }
          }
        },
        "props": {
          "style": {
            "textAlign": "end"
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "lbEngUnit"
        },
        "position": {
          "height": 32,
          "width": 104,
          "x": 444,
          "y": 11
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "fallbackDelay": 2.5,
                "mode": "indirect",
                "references": {
                  "tagPath": "{view.params.tagPath}"
                },
                "tagPath": "{tagPath}.EngUnit"
              },
              "type": "tag"
            }
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "lbToolTip"
        },
        "position": {
          "height": 32,
          "width": 536,
          "x": 12
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "fallbackDelay": 2.5,
                "mode": "indirect",
                "references": {
                  "tagPath": "{view.params.tagPath}"
                },
                "tagPath": "{tagPath}.path"
              },
              "type": "tag"
            }
          }
        },
        "props": {
          "style": {
            "classes": "holStyles/holTooltipHover"
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "border_lower\n"
        },
        "position": {
          "height": 423,
          "rotate": {
            "angle": "90deg"
          },
          "width": 2,
          "x": 225.308,
          "y": -166.772
        },
        "props": {
          "style": {
            "backgroundImage": " linear-gradient(#dadada, #f5f5f5)"
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "border_right"
        },
        "position": {
          "height": 32,
          "rotate": {
            "angle": "180deg"
          },
          "width": 2,
          "x": 437,
          "y": 12
        },
        "props": {
          "style": {
            "backgroundImage": " linear-gradient(#dadada, #f5f5f5)"
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "position": {
      "x": 0,
      "y": 32
    },
    "props": {
      "style": {
        "backgroundColor": "#FFEEEE"
      }
    },
    "type": "ia.container.coord"
  }
}

```

---

<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 27, 2020, 9:01pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/8 "2020-11-27T21:01:20Z")

</div>

What version are you using, @Transistor?

---

<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:** [November 27, 2020, 9:01pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/9 "2020-11-27T21:01:28Z")

</div>

You’re using a coord container for your template, which for what you’ve got in it is more suited to a flex container. It’s not easy to convert the view template to another container type, so it’s easier just to create new and copy in the components. For the params and custom props, you can copy them from the json and paste into your new view’s json

---

<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 27, 2020, 9:04pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/10 "2020-11-27T21:04:17Z")

</div>

@nminchin Sort of…

He’s using Labels with defined positions and a background image (gradient) for styling, which you couldn’t do in a Flex Container. That being said, I think it would look better with applied borders on only certain sides, at which point this should absolutely be done in a Flex Container.

---

<div class="post-metadata">

**Author:** ![Shyam](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/shyam/32/42528_2.png) [@Shyam](https://forum.inductiveautomation.com/u/Shyam)\
**Post date:** [January 11, 2023, 9:17am UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/11 "2023-01-11T09:17:01Z")

</div>

I'm facing same.do you have any solution for this?

---

<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:** [January 11, 2023, 3:25pm UTC](https://forum.inductiveautomation.com/t/ign-1368-scroll-bars-appearing-on-embedded-carousel-view/40975/12 "2023-01-11T15:25:05Z")

</div>

The root cause of the issue the original poster encountered was some rotated Labels. Removal of the rotation should have alleviated the issue, though it's been so long that I don't remember if @Transistor adopted the Flex approach. The rotation was the underlying issue because of an issue of how the components report their position to the parent while rotated - their report is slightly off, and so the container in this situation believes they are expanding beyond the boundaries of the container.