# Scroll Bar Positions of an Embedded View

**URL:** <https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [June 28, 2023, 12:28pm UTC](https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631 "2023-06-28T12:28:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![James\_Lindsay](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@James\_Lindsay](https://forum.inductiveautomation.com/u/James_Lindsay)\
**Post date:** [June 28, 2023, 12:28pm UTC](https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631/1 "2023-06-28T12:28:49Z")

</div>

I have a perspective screen with a dropdown menu with labels of components on an embedded screen and a value of the x,y position of the component within the co-ordinate embedded view. Since the Co-Ordinate screen is around 4000 x 2000 it always has scroll bars. Is it possible to have the embedded view centre the scroll bars on the object that is selected on the dropdown menu?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [June 28, 2023, 1:02pm UTC](https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631/2 "2023-06-28T13:02:11Z")

</div>

Picture \>\> 1000 words. Add one into your post.

---

<div class="post-metadata">

**Author:** ![James\_Lindsay](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@James\_Lindsay](https://forum.inductiveautomation.com/u/James_Lindsay)\
**Post date:** [June 28, 2023, 1:55pm UTC](https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631/3 "2023-06-28T13:55:07Z")

</div>

![Example](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/213dd648054073dd70aff772dee5676675459d7f.png)

This is a example. The drop down menu works correctly with the embedded view components, the X,Y Co-ordinates are correct. The part that I can't figure out is if it is possible to move the component selected in the dropdown to center the screen to the item?

---

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [June 28, 2023, 3:18pm UTC](https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631/4 "2023-06-28T15:18:50Z")

</div>

Sounds like you want the view to scroll automatically. ~~At the moment I don't believe it is possible.~~  
Here are some previous discussions:

> [@Implementing Auto Scroll for Flex Repeater](https://forum.inductiveautomation.com/t/implementing-auto-scroll-for-flex-repeater/73572/2):
>
> No can do at the moment. This is a perfect example of why we need this functionality introduced.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 28, 2023, 3:32pm UTC](https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631/5 "2023-06-28T15:32:23Z")

</div>

There's a solution using the `focus()` method of components.

I just tried and it works pretty much as expected.  
Here's how I set it up:  
Put a message handler on each component that you want to be able to target.  
In this handler, check for an `id` passed with the payload, compare it with an unique identifier that you give to your components, and if it matches, call `self.focus()`

On your dropdown, add a change script on the `value` property, and call `system.perspective.sendMessage` from there.

Note that the doc says

> Due to the nature of focus, calling the focus method is only effective on components that can have focus. Input components such as the Text Field and Numeric Entry Field components can gain focus, but Display components like Labels and Images can not gain focus.

But it actually works with labels, which is what I used to test the method.  
There might be components for which this won't work, though.

Also, it doesn't really put the component in the center... but it does put it into view, which is better than nothing I guess ?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 28, 2023, 3:48pm UTC](https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631/6 "2023-06-28T15:48:49Z")

</div>

Actually, if you supply `domId` attributes to each of the components which could be "scrolled" to, you could perform a navigation call on value change of the Dropdown.

Suppose you had a Table and you set `Table.meta.domId` to a value of "MyCoolTable". you could invoke the following code as part of the change script of `Dropdown.props.value` to force the page to scroll to that Table:

```auto
system.perspective.navigate(page="/path/to/page#MyCoolTable") # should work
system.perspective.navigate(url="http://gateway_ip:port/data/perspective/client/ProjectName/path/to/page#MyCoolTable") # definitely works

```

This won't "center" the component, but it will scroll it into view.

---

<div class="post-metadata">

**Author:** ![James\_Lindsay](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@James\_Lindsay](https://forum.inductiveautomation.com/u/James_Lindsay)\
**Post date:** [June 28, 2023, 6:13pm UTC](https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631/7 "2023-06-28T18:13:36Z")

</div>

I just tried this and it worked exactly how I wanted, thankyou so much.

---

<div class="post-metadata">

**Author:** ![James\_Lindsay](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@James\_Lindsay](https://forum.inductiveautomation.com/u/James_Lindsay)\
**Post date:** [June 28, 2023, 6:14pm UTC](https://forum.inductiveautomation.com/t/scroll-bar-positions-of-an-embedded-view/75631/8 "2023-06-28T18:14:02Z")

</div>

I'm going to give this method a go, thank you for the reply.
