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):
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
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:
Hope that would help others too!
{
"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"
}
}