# Perspective - View Canvas - replicate Excel spreadsheet - freeze top and left headers? **URL:** \ **Category:** Ignition\ **Tags:** ignition80, perspective\ **Created:** [August 27, 2021, 10:59pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400 "2021-08-27T22:59:10Z")\ **Posts on this page:** 14\ **Page:** 2
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 7, 2021, 1:57pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/21 "2021-09-07T13:57:53Z")
just put -webkit-sticky where you have sticky for now xd i doubt that it will help tho, but im not very familair with ios ---
**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\ **Post date:** [September 7, 2021, 2:25pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/22 "2021-09-07T14:25:14Z")
Ah yes, already tried that, it doesn’t recognize -webkit-sticky. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 7, 2021, 2:25pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/23 "2021-09-07T14:25:37Z")
yeah thought so, you might have to go to the raw theme.css afterall to make this work in safari you know how theme.css works? else you can also do injection, not a good practice but its a lot easier to test xd ---
**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\ **Post date:** [September 7, 2021, 2:32pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/24 "2021-09-07T14:32:30Z")
Yes, I’m somewhat familiar with the theme.css. For instance, I"m using the built-in light-warm theme. Now I just need to know which css file I can put some of this in (Globals.css?). ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 7, 2021, 2:35pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/25 "2021-09-07T14:35:24Z")
its best to make a new theme that imports the other themes i guess. you should proabbly first just test it out with injection thats a lot faster i did this and it works (on chrome and should use webkit on safari) i created a style class named “sticky” (in the root, so no subfolders) in the backgroundcolor of this style pase this to inject it: `}.psc-sticky>div:nth-child(1){position=-webkit-sticky !important; position:sticky !important; top:0px !important; left:auto !important; margin-left:50px} .psc-sticky>div:nth-child(2){position=-webkit-sticky !important; position:sticky !important; top:auto !important; left:0 !important;}{` give this style to the viewcanvas (not the instances) the first instance is the header, the second the left border it does not work if you give it to the instances like this as for some reason there is a div in between xd ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6d67f78eacbc7b3979720d8cc5034bdd3fbe2714.png) (yes “!important” is required else igntion overwrites it) the crossed out line should work in safari i guess ---
**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\ **Post date:** [September 7, 2021, 3:07pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/26 "2021-09-07T15:07:46Z")
> [@victordcq](#): > > }.psc-sticky\>div:nth-child(1){position=-webkit-sticky !important; position:sticky !important; top:0px !important; left:50px !important;} .psc-sticky\>div:nth-child(2){position=-webkit-sticky !important; position:sticky !important; top:50px !important; left:0px !important;}{ Tried this and still doesn't work within the perspective iOS app. Thank you so much for all the suggestions, it helps and motivates me in the right direction in different things I can do with these kinds of things. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 8, 2021, 6:36am UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/27 "2021-09-08T06:36:44Z")
Weird, is it by chance an older ios model? What version of safari is it running? it needs to be 6+ to work with webkit and 13+ to work without it (like chrome) (i could run some tests here too if i know you version in a vm xd) Can you set the overflow of all elements to scroll instead of auto, welh atleast for the canvas? Seems Safari has some problems with that one too. ---
**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\ **Post date:** [September 8, 2021, 1:39pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/28 "2021-09-08T13:39:37Z")
No, the iOS is newer and an iPhone SE 2020 model and I’m using the Perspective app, safari should be on the newest version. For the overflow - I had to set them to visible to get this far, the weird thing is the canvas needed overflow set to auto, anything else makes it worse (contrary to what others have said generally). ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 8, 2021, 1:41pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/29 "2021-09-08T13:41:49Z")
hm with visible there shouldnt be any scrolbars tho xd actually does it work in the app on a windows desktop? the workstation i just tried to run my fix > [@victordcq](#): > > }.psc-sticky\>div:nth-child(1){position=-webkit-sticky !important; position:sticky !important; top:0px !important; left:50px !important;} .psc-sticky\>div:nth-child(2){position=-webkit-sticky !important; position:sticky !important; top:50px !important; left:0px !important;}{ on a safari in a ios emulator in a chrome browser.. and that seemed to work tho. but ofc it are emulators so that is another weird thing xD can you run the website on safari and open the inspotor there to check out the classes? and see if you find this ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6d67f78eacbc7b3979720d8cc5034bdd3fbe2714.png) did you manage to get this styleclass working on the browser (in windows) do you see it there? ---
**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\ **Post date:** [September 8, 2021, 10:40pm UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/30 "2021-09-08T22:40:59Z")
I’ve been using the built-in developer tools in Chrome and select the iPhone presets for display size. It has always worked in that mode. On the right, I can view the code, but not sure if this is emulating iOS. Are you using a different browser or extension plug-in? ---
**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:59am UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/31 "2021-09-09T02:59:55Z")
I didn’t have any issues with declaring a sticky position. 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) ---
**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:34am UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/32 "2021-09-09T06:34:52Z")
Yes its working but do you find the style? you can use ctrl+shift+c to enter inspect elemnt, just click the first label of the header and you might have to go up a few divs to find the container where you should find the css classes in. Using that is not enough to emulate ios, you need a vm for that, if you have an ios device its not worth setting up an emulator , as its clucky to use and not the real deal anyways. apple is quite peculiar about vms… ive updated the script a bit, it should work more consistent the ‘left 50px’ was wrong afterall it should have been on auto with a margin instead. actually not sure how it even worked in the first place xD maybe this will solve the thing in ios too idk it still might be something else, i gotta see what you have `}.psc-sticky>div:nth-child(1){position=-webkit-sticky !important; position:sticky !important; top:0px !important; left:auto !important; margin-left:50px} .psc-sticky>div:nth-child(2){position=-webkit-sticky !important; position:sticky !important; top:auto !important; left:0 !important;}{` ---
**Author:** ![indenkleefj](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/indenkleefj/32/10961_2.png) [@indenkleefj](https://forum.inductiveautomation.com/u/indenkleefj)\ **Post date:** [September 18, 2023, 9:46am UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/33 "2023-09-18T09:46:10Z")
Can you share this resource? ---
**Author:** ![Beckham\_Wilson](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@Beckham\_Wilson](https://forum.inductiveautomation.com/u/Beckham_Wilson)\ **Post date:** [July 21, 2025, 10:38am UTC](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400/34 "2025-07-21T10:38:20Z")
Hi @rpavlicek, Workaround to get the left headers frozen in table component in the attached post. Unsure if you can use the table component for your usecase though? > [@How to freeze a column in table](https://forum.inductiveautomation.com/t/how-to-freeze-a-column-in-table/92736/3): > > Yes it is possible it doesn't work immediately because you need the inset properties and you need it to attach to the correct parent. Here is how you do it: Set position: sticky; Set atleast one of the inset properties: i.e (left:0; since we want it on the left) Ensure it attaches to correct ancestor by checking there are no hidden scrolling areas between the ancestor of choice and the sticky component (See attached [https://polypane.app/blog/getting-stuck-all-the-ways-position-sticky-can-fail…](https://polypane.app/blog/getting-stuck-all-the-ways-position-sticky-can-fail/) [Previous page](https://forum.inductiveautomation.com/t/perspective-view-canvas-replicate-excel-spreadsheet-freeze-top-and-left-headers/50400.md?page=1)