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

Ignition
1

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

Perspective coordinate view 1
Perspective coordinate view 1808Ă—219 27.2 KB
!
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?

2

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.

3

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.

4

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

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?

6

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

7

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

What version are you using, @Transistor?

9

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

10

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

11

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

12

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.

1 Like