Scrolling one bottom right flex container among three or four total

Ignition
1

I have a header and leftside flex container sets that I want to hold still, while I want to scroll the bottom right flex container up and down through all my machines.
I am struggling though.
Right now:

main view - 1920x2000

root                  overflow: hidden  (if I set it to visible, the whole page will scroll) 
header                overflow: hidden
table                 overflow: visible
leftNav               overflow:hidden
bottomRightScrollFlow overflow: scroll

root column no dimensions
header row 33 tall
leftnav column 450 wide
bottomRightScrollFlex column 1470 wide

How do I get only the bottomRightScrollFlex to scroll?

2

Wrap the bottomRightScrollFlow in another container which fits the root and set that wrapper to overflow scroll, while you set bottomRightScrollFlow to overflow visible

1 Like
3

what do you mean by fits the root?

4

wrapper: width:1470px, height:100%, overflow:auto
bottomRightScrollFlow: width: 1470px, height:auto, overflow:visible

2 Likes
5

I am doing something wrong.
I tried this below, but it did not work. There was no scroll.

Does this image help you help me? Do you want the copy of the json?

image
image1783Ă—882 80.9 KB

6

@victordcq is saying that you need another flex container to wrap what you are calling bottomRightScrollFlow.

The wrapper container, should be set how your current bottomRightScrollFlow is set, so that it “fits” it’s container without a scroll bar.

Then you configure the actual bottomRightScrollFlow differently, as he showed, so that container and only that container will scroll.

2 Likes
7

I thought I did that in the example I show, and it doesn’t work.

Can you check my example?

I think “rightcontentcolumn1502scroll” is set to scroll.
I think “outerrightcontentcolumn906visible” is set to visible inside the other.
copied from the root:

[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "direction": "column",
      "style": {
        "overflow": "visible"
      }
    },
    "meta": {
      "name": "root"
    },
    "position": {},
    "custom": {},
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "style": {
            "overflow": "visible"
          }
        },
        "meta": {
          "name": "header80"
        },
        "position": {
          "shrink": 0,
          "basis": "80px"
        },
        "custom": {}
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "style": {
            "overflow": "visible"
          }
        },
        "meta": {
          "name": "bodyrow840"
        },
        "position": {
          "shrink": 0,
          "basis": "840px"
        },
        "custom": {},
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "overflow": "visible"
              }
            },
            "meta": {
              "name": "leftnav"
            },
            "position": {
              "shrink": 0,
              "basis": "418px"
            },
            "custom": {}
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column",
              "style": {
                "overflow": "scroll"
              }
            },
            "meta": {
              "name": "rightcontentcolumn1502scroll"
            },
            "position": {
              "shrink": 0,
              "basis": "1502px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.container.flex",
                "version": 0,
                "props": {
                  "direction": "column",
                  "style": {
                    "overflow": "visible"
                  }
                },
                "meta": {
                  "name": "outerrightcontentcolumn906visible"
                },
                "position": {
                  "shrink": 0,
                  "basis": "906px"
                },
                "custom": {},
                "children": [
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  },
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible_0"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  },
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible_1"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]
8

might be easier with a coorindate container. i dont really use flexes to often

Summary 
{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Label"
                },
                "position": {
                  "basis": "500px"
                },
                "props": {
                  "text": "Label"
                },
                "type": "ia.display.label"
              },
              {
                "meta": {
                  "name": "Label_0"
                },
                "position": {
                  "basis": "500px"
                },
                "props": {
                  "text": "Label"
                },
                "type": "ia.display.label"
              },
              {
                "meta": {
                  "name": "Label_1"
                },
                "position": {
                  "basis": "500px"
                },
                "props": {
                  "text": "Label"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "FlexContainer"
            },
            "position": {
              "height": "auto",
              "width": "100%"
            },
            "props": {
              "direction": "column"
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "ScrollingContainer"
        },
        "position": {
          "grow": 1
        },
        "type": "ia.container.coord"
      },
      {
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "basis": "200px"
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.flex"
  }
}
1 Like
9

where do I paste that? on root?

it doesn’t have the square brackets? does my editor add thsoe?

10

i copied the whole view sry

[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {},
    "meta": {
      "name": "root"
    },
    "position": {},
    "custom": {},
    "children": [
      {
        "type": "ia.container.coord",
        "version": 0,
        "props": {},
        "meta": {
          "name": "ScrollingContainer"
        },
        "position": {
          "grow": 1
        },
        "custom": {},
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column"
            },
            "meta": {
              "name": "FlexContainer"
            },
            "position": {
              "width": "100%",
              "height": "auto"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Label"
                },
                "meta": {
                  "name": "Label"
                },
                "position": {
                  "basis": "500px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Label"
                },
                "meta": {
                  "name": "Label_0"
                },
                "position": {
                  "basis": "500px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Label"
                },
                "meta": {
                  "name": "Label_1"
                },
                "position": {
                  "basis": "500px"
                },
                "custom": {}
              }
            ]
          }
        ]
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {},
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "basis": "200px"
        },
        "custom": {}
      }
    ]
  }
]
11

I saw one of yours is set to grow, is it the missing part?

12

your container also has the scroll? i see no problem

image
image1068Ă—449 24.1 KB

image
image785Ă—881 24.4 KB

1 Like
13

I think it works

I will test it more.

I am not sure if grow was the missing part. Thanks so much, I was so lost.

update: Grow might matter.
When I removed grow, this worked still.
However, on another page, scrolling did not work till I had set grow to 1 at least once.
Thanks so much.

image
image1916Ă—913 4.32 KB

1 Like