# \[FEATURE\] position:sticky

**URL:** <https://forum.inductiveautomation.com/t/feature-position-sticky/50460>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 31, 2021, 7:18am UTC](https://forum.inductiveautomation.com/t/feature-position-sticky/50460 "2021-08-31T07:18:24Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 31, 2021, 7:18am UTC](https://forum.inductiveautomation.com/t/feature-position-sticky/50460/1 "2021-08-31T07:18:24Z")

</div>

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):  
https://codepen.io/paulobrien/embed/preview/LBrMxa?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=LBrMxa

> [@Perspective - View Canvas - replicate Excel spreadsheet - freeze top and left headers?](https://forum.inductiveautomation.com/t/perspective-disabling-scrolling-horizontal-or-vertical-seperatly/50400/6):
>
> here ya go: Sorry for the terrible quality, i couldnt upload the big video and seems i reduce it way to much xD the spacing columns and rows is a bit off but its just a demo stuck_out_tongue important things are: for the header position:sticky top:0 left:null for the left one: position:sticky top:null left:0 for the rest: position:absolute or position:relative [ { "position": "sticky", "top": "0px", "left": null, "bottom": "auto", "right": "auto…

> **[Allow for position:sticky | Ignition Features and Ideas | Inductive Automation](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/allow-for-positionsticky)**
>
> 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

---

<div class="post-metadata">

**Author:** ![eberly88](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@eberly88](https://forum.inductiveautomation.com/u/eberly88)\
**Post date:** [September 9, 2021, 2:14am UTC](https://forum.inductiveautomation.com/t/feature-position-sticky/50460/2 "2021-09-09T02:14:58Z")

</div>

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

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2ae62a7cbf682efa45747b110581dab7eb54099e.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2ae62a7cbf682efa45747b110581dab7eb54099e.mp4)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 9, 2021, 6:36am UTC](https://forum.inductiveautomation.com/t/feature-position-sticky/50460/3 "2021-09-09T06:36:21Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![eberly88](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@eberly88](https://forum.inductiveautomation.com/u/eberly88)\
**Post date:** [September 9, 2021, 11:58am UTC](https://forum.inductiveautomation.com/t/feature-position-sticky/50460/4 "2021-09-09T11:58:32Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![eberly88](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@eberly88](https://forum.inductiveautomation.com/u/eberly88)\
**Post date:** [September 9, 2021, 12:04pm UTC](https://forum.inductiveautomation.com/t/feature-position-sticky/50460/5 "2021-09-09T12:04:52Z")

</div>

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/872983b5060f38fda63036e1d33803180210b5a5.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/872983b5060f38fda63036e1d33803180210b5a5.mp4)
  
 ![Screenshot 2021-09-09 080415](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f89aaaa9d3d2a5a061103fd8a310df47502d726f.png)

---

<div class="post-metadata">

**Author:** ![eberly88](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@eberly88](https://forum.inductiveautomation.com/u/eberly88)\
**Post date:** [September 9, 2021, 12:07pm UTC](https://forum.inductiveautomation.com/t/feature-position-sticky/50460/6 "2021-09-09T12:07:34Z")

</div>

![Screenshot 2021-09-09 080717](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/4/7475b4c8e4d994fc3f513e31d4639445a0c9b78d.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 9, 2021, 12:18pm UTC](https://forum.inductiveautomation.com/t/feature-position-sticky/50460/7 "2021-09-09T12:18:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bao.nguyen](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bao.nguyen](https://forum.inductiveautomation.com/u/bao.nguyen)\
**Post date:** [October 14, 2022, 2:51am UTC](https://forum.inductiveautomation.com/t/feature-position-sticky/50460/8 "2022-10-14T02:51:59Z")

</div>

Hi Eberly,

Thank you for sharing your findings. That's great!

I followed your guide and succeeded in making the target component stick while scrolling.  
Key things that I applied are:

1. User 'Flex' container as the parent (regardless of the view container).
2. Parent - set 'overflow': 'visible'
3. Sticky child - set 'position': 'stickly'
4. Sticky child - set 'top': '0px' (this is the important bit making things work for me)

Hope that would help others too!

![java_x1zFF3Kdqj](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/a/aa0381e1d32a34d1cd5ff6c983bd52926de0ea4c.gif)

```auto
{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "children": [
          {
            "meta": {
              "name": "sticky"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "style": {
                "backgroundColor": "lightgreen",
                "position": "sticky ",
                "top": "0px"
              },
              "text": "Sticky One"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_1"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_2"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_3"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_4"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_5"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_6"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_7"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_8"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_9"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_10"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_11"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_12"
            },
            "position": {
              "basis": "95px"
            },
            "props": {
              "text": "Label"
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "height": "300%",
          "width": 100,
          "x": 1
        },
        "props": {
          "direction": "column",
          "style": {
            "overflow": "visible"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

```