[Bug-1182]Scroll bars appearing on embedded carousel view

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

Following on from my previous question, Single tag, tag-drop Perspective template - #2 by cmallonee, I have created a coordinate view as shown below. (The pink background is just to show the extents of the view when used.)

!
When I tighten up the container height scroll bars appear. None of the components extend outside the container.

Perspective embedded view 1!
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?

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.

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.

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

{
  "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"
  }
}

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?

@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.

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

{
  "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"
  }
}

What version are you using, @Transistor?

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

@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.