[FEATURE] position:sticky

Currently you can only sure position:absolute and relative. But there are more usefull ones too like sticky! Currently its only possible to use that in a canvas (i think):

sticky can do this! stick the header and left column to the side depending on scroll direction, cool to make tables or something.

uh a cooler example here (in html+css):

2 Likes

I didn’t have any issues when declaring a sticky position in the designer? I attached a sample video

you arent using canvas? can i see how you did it? when i tried to put sticky, igintion didnt recoginzed it and turned it in their default value (absolute)

I used flexbox. The headers didn’t always stick in the designers preview mode for some reason but it works fine in firefox and chrome.

Sticky is tricky to use at times – Make sure the parent container overflow isn’t set to auto, hidden, or or ANYTHING other than visible.

{
{
  "custom": {},
  "params": {},
  "propConfig": {
    "params.feature": {
      "paramDirection": "input"
    },
    "params.key": {
      "paramDirection": "input"
    },
    "params.tier1": {
      "paramDirection": "input"
    },
    "params.tier2": {
      "paramDirection": "input"
    }
  },
  "props": {
    "defaultSize": {
      "height": 4000,
      "width": 1200
    }
  },
  "root": {
    "children": [
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Label"
                },
                "props": {
                  "style": {
                    "color": "white",
                    "fontSize": "48px",
                    "fontWeight": "800",
                    "textAlign": "center"
                  },
                  "text": "STICKY HEADER 1"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "sticky-1-header"
            },
            "props": {
              "justify": "center",
              "style": {
                "background-color": "#23cba7",
                "overflow": "visible",
                "position": "sticky  ",
                "top": "70px"
              }
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "header-1-container"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "direction": "column",
          "style": {
            "background-color": "#F6E5A7",
            "height": "100vh",
            "overflow": "visible"
          }
        },
        "type": "ia.container.flex"
      },
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Label"
                },
                "props": {
                  "style": {
                    "color": "white",
                    "fontSize": "48px",
                    "fontWeight": "800",
                    "textAlign": "center"
                  },
                  "text": "STICKY HEADER 2"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "sticky-2-header"
            },
            "props": {
              "justify": "center",
              "style": {
                "background-color": "#23cba7",
                "overflow": "visible",
                "position": "sticky  ",
                "top": "70px"
              }
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "header-2-container"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "direction": "column",
          "style": {
            "background-color": "#C6E0F6",
            "height": "100vh",
            "overflow": "visible"
          }
        },
        "type": "ia.container.flex"
      },
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Label"
                },
                "props": {
                  "style": {
                    "color": "white",
                    "fontSize": "48px",
                    "fontWeight": "800",
                    "textAlign": "center"
                  },
                  "text": "STICKY HEADER 3"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "sticky-3-header"
            },
            "props": {
              "justify": "center",
              "style": {
                "background-color": "#23cba7",
                "overflow": "visible",
                "position": "sticky  ",
                "top": "70px"
              }
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "header-3-container"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "direction": "column",
          "style": {
            "background-color": "#B8E4CA",
            "height": "100vh",
            "overflow": "visible"
          }
        },
        "type": "ia.container.flex"
      },
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Label"
                },
                "props": {
                  "style": {
                    "color": "white",
                    "fontSize": "48px",
                    "fontWeight": "800",
                    "textAlign": "center"
                  },
                  "text": "STICKY HEADER 4"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "sticky-4-header"
            },
            "props": {
              "justify": "center",
              "style": {
                "background-color": "#23cba7",
                "overflow": "visible",
                "position": "sticky  ",
                "top": "70px"
              }
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "header-4-container"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "direction": "column",
          "style": {
            "background-color": "#F5C094",
            "height": "100vh",
            "overflow": "visible"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "overflow": "visible",
        "paddingTop": "70px"
      }
    },
    "type": "ia.container.flex"
  }
}


ah yea like that if you use it on the whole screen, then ignition has an overflow auto on the app-container
else it wouldnt work, for good practice you shouldnt put visible on the root for sure. the root container has to have auto/scroll for sticky to work
.seems that flex containers also work but coordinate ones im pretty sure dont