Perspective - View Canvas - replicate Excel spreadsheet - freeze top and left headers?

[rpavlicek]

In Perspective, I am trying to make a manual table where it would have headers on the left and dates on the top. The data is in a flex repeater. I would like it where I can scroll up or down so they move together except the top date headers, but only a flex repeater on the right of the headers would be able to be scrolled horizontally. Think of Excel worksheet where you freeze the top pane, but I’m not referring to a Table component (which I know many people have been requesting this functionality).

I thought I was getting close by nesting containers and messing with layout settings, but unable to figure it out. Has anyone been able to do anything close to this?

[victordcq]

put the header row above your flex repeater of the data i guess in its own (coodinate) container.
hmm you cant scroll to the side than tho…
why not use a table component ?

[rpavlicek]

I tried this before, but you’re correct, helps with scrolling one way but not the other. Can the table component “freeze” both the left side and top? I don’t think it has that functionality, but can play around with it.

[victordcq]

No I doubt it can…
You probably could do something with the canvas tho if you assign absolute positions to the headers and relative ones to the columns/rows

[victordcq]

Or even better position: sticky/fixed. Unfortunately you can't really use sticky outside a canvas I think as ignition automatically changes the position to absolute outside of it... unless you use theme.css i guess

i made a feature request:

Allow for position:sticky | Ignition Features and Ideas | Inductive Automation

[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):

[victordcq]

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

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",
    "zIndex": "auto",
    "width": "auto",
    "height": "auto",
    "viewPath": "header",
    "viewParams": {},
    "style": {
      "classes": ""
    }
  },
  {
    "position": "sticky",
    "top": null,
    "left": "0px",
    "bottom": "auto",
    "right": "auto",
    "zIndex": "auto",
    "width": "auto",
    "height": "auto",
    "viewPath": "left",
    "viewParams": {},
    "style": {
      "classes": ""
    }
  },
  {
    "position": "absolute",
    "top": "50px",
    "left": "50px",
    "bottom": "auto",
    "right": "auto",
    "zIndex": "auto",
    "width": "auto",
    "height": "auto",
    "viewPath": "row",
    "viewParams": {},
    "style": {
      "classes": ""
    }
  }
]

[rpavlicek]

Very nice, looks like this may work, I will have to adjust my views to have two flex repeaters: one for the top and one for the data. The headers on the left can stay as is. I will update if I get this working, thank you so much for your help!

[rpavlicek]

I almost have this, but need the left sticky and top sticky meet be offset so the top left corner there is nothing or a third sticky for the very top left corner as a spacer so everything lines up correctly.

[rpavlicek]

I was very close to getting something working, but after trying many combinations, it seems that the sticky position instances want to stack themselves in order from top to bottom. I couldn’t change the position as I wanted. I was close, as it almost did what I wanted by specifying a value in the bottom position property, but different screen resolution made the instances scroll off the screen different from another.

[victordcq]

yeah you dont want want to add in another sticky to fill up the corner, cant you just add in a margin?
or change left of the top row to left:50px instead of null. Could also always just add in an empty value for the first column

yeah changing left:null to left:50px made it line up for me:

[rpavlicek]

It doesn’t do anything when I do that. Is it because I have the view canvas in a flex view?

[victordcq]

maybe? try copying it an a coordinate one i guess. it seems to be working for me and i use coordinate one

[rpavlicek]

I just tried this now, but my top header does not move over any? I’m trying this one both versions 8.1.9 and 8.0.16.
I have a simple top and left header setup, where I created a coordinate view and put a viewCanvas on it. I then put the top header in the first instance as a sticky, and the left as the same. I put in the same properties as you, but it doesn’t want to move it over?

[rpavlicek]

With a lot of work across different components (remember I had flex repeaters and such), I was able to get something that works pretty good. Below is an example. However when the mobile screen orientation changes (portrait to landscape…), it causes the top and left header’s “sticky” position to change and unsticks itself part way. The user would have to reload the screen to have it working again until they would happen to change their orientation again. Any recommendation to fix this or workaround? Not sure if Ignition exposes all CSS properties, I’m familiarizing myself with all of that.

[victordcq]

Seems to be a bug related to some mobile devices…
Apperently doing a media query on orientation might force the redraw on its own.

you’ll ahve to put this in a theme.css or inject it in a style class

@media screen and (orientation: landscape){
  //something here?
}

If that doesnt do it while empty maybe changing something trivial might do it, like the background color change it by one gradient or something else small.
if that also doesnt work you proabbly will have to trigger a style class on the canvas or even duplicate all your work on the headers and stuff here idk.

[rpavlicek]

I put a media query in a style class, and changed the class on the view canvas style property, however it didn’t change anything.

[victordcq]

Did you try changing something in it?
if tht doesnt work idk what will tho, normally that should trigger a redraw…
maybe if you put it on the instances themself instead of the canvas?
or change the top/left by 1px

[rpavlicek]

Yes, I changed the text size and background color. I tried putting it both in the canvas itself and in each of the instances.
Some of the articles I read elsewhere pointed to iOS and Safari having issues with the sticky position. The recommendation is to put in position: -webkit-sticky with position: sticky’s underneath, but in Ignition you can’t put two properties with the same name, unless there is another way to do this?

[victordcq]

does it help if you only do position -webkitsticky on your mobile?
we can worry about version later xd

[rpavlicek]

How would this be done?