# Dropdown Events and Dynamic View Size **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [July 31, 2023, 6:06pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164 "2023-07-31T18:06:01Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Liam\_Dietrich](https://avatars.discourse-cdn.com/v4/letter/l/b5a626/32.png) [@Liam\_Dietrich](https://forum.inductiveautomation.com/u/Liam_Dietrich)\ **Post date:** [July 31, 2023, 6:06pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164/1 "2023-07-31T18:06:01Z")
I am attempting to make a tree shift-down when a dropdown is showing by changing the pixels of a container. I am struggling with using events to perform this without error. **Is there an event, or methof, to tell when the dropdown is showing?** Using onFocus and onBlur is giving me some issues; sometimes the container stays expanded when not in focus. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/e/2e28fe9210bc0adaf385f330bc950fe473ee7b99.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/da67df2aa86fc8f290da3d7e6b3544ad371666b5.png) ---
**Author:** ![CalebM](https://avatars.discourse-cdn.com/v4/letter/c/71c47a/32.png) [@CalebM](https://forum.inductiveautomation.com/u/CalebM)\ **Post date:** [July 31, 2023, 6:37pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164/2 "2023-07-31T18:37:12Z")
You could probably achieve this with CSS using the custom stylesheet. When the dropdown is open it get a class of `.iaDropdownCommon_active`. Utilizing a [adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) you could apply a transformation to the tree. ```auto .iaDropdownCommon_active + .psc-testing\/tree { transform: translateY(100px); } ``` I added this to my stylesheet and applied the class of `testing/tree` to my tree, so anytime the dropdown above the tree is opened the tree will be moved down 100px. I only tested this in an up to date chrome, it may or may not work in workstation. ---
**Author:** ![Liam\_Dietrich](https://avatars.discourse-cdn.com/v4/letter/l/b5a626/32.png) [@Liam\_Dietrich](https://forum.inductiveautomation.com/u/Liam_Dietrich)\ **Post date:** [July 31, 2023, 7:07pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164/3 "2023-07-31T19:07:18Z")
Thanks for the reply. I must be implementing the CSS incorrectly. I am placing the following code in my style class `Reports/TreeDropdownSpace`. ```auto .iaDropdownCommon_active + .psc-Reports\/Tree { transform: translateY(100px); } ``` I am then applying the style class `Reports/TreeDropdownSpace` to the Dropdown and the `Reports/Tree` style class to the tree component. Any direction would be greatly appreciated. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/b/7bea872eee05730737fcdb62329405d412f5a1bb.png) ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [July 31, 2023, 7:09pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164/4 "2023-07-31T19:09:18Z")
_Why_ are you doing this? It's a common UI pattern to have a dropdown appear 'over top' of other content, temporarily obscuring it. There's a reason it's not easy to do this - you're swimming against a _well established_ UI pattern. What's the reasoning? ---
**Author:** ![Liam\_Dietrich](https://avatars.discourse-cdn.com/v4/letter/l/b5a626/32.png) [@Liam\_Dietrich](https://forum.inductiveautomation.com/u/Liam_Dietrich)\ **Post date:** [July 31, 2023, 7:19pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164/5 "2023-07-31T19:19:16Z")
Appreciate the guidance. Rather than filtering the tree components' actual contents, I wanted to create a search option that did not cover it, as covering the tree feels counterintuitive. But if accomplishing this counters UI standards then maybe I should take a different approach to the problem. Any further guidance is greatly appreciated. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/9/39abaf8c30412751052a53473c755593b30cf60f.png) ---
**Author:** ![CalebM](https://avatars.discourse-cdn.com/v4/letter/c/71c47a/32.png) [@CalebM](https://forum.inductiveautomation.com/u/CalebM)\ **Post date:** [July 31, 2023, 7:24pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164/6 "2023-07-31T19:24:03Z")
What does the dropdown do compared to the tree view. Would it make more sense for someone to pick the report directly from the tree? ---
**Author:** ![Liam\_Dietrich](https://avatars.discourse-cdn.com/v4/letter/l/b5a626/32.png) [@Liam\_Dietrich](https://forum.inductiveautomation.com/u/Liam_Dietrich)\ **Post date:** [July 31, 2023, 7:35pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164/7 "2023-07-31T19:35:05Z")
The dropdown contains all of the reports that are listed in the tree. If a report is selected in the dropdown, it then expands the folders and selects the report in the tree, as well as opens the report in a report viewer component. ---
**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:** [July 31, 2023, 7:44pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164/8 "2023-07-31T19:44:21Z")
I needed a filter on a tree so I did this: - Add a text field above the tree, `txtFilter`. - I have a binding on the tree's `items` property. In my case the tree is generated from a named query and the query has a parameter, `'%' + {../flexFilter/txtFilter.props.text} + '%' See some of my other posts: > [@Altering Tree in Perspective Module](https://forum.inductiveautomation.com/t/altering-tree-in-perspective-module/65325/2): > > I wouldn't think it's possible easily. What I've done was add a small flex container above the tree with a handy filter and a + button and only enable the button if a valid selection is made on the tree. Operation is easily understood by the users. ---
**Author:** ![CalebM](https://avatars.discourse-cdn.com/v4/letter/c/71c47a/32.png) [@CalebM](https://forum.inductiveautomation.com/u/CalebM)\ **Post date:** [July 31, 2023, 7:47pm UTC](https://forum.inductiveautomation.com/t/dropdown-events-and-dynamic-view-size/77164/9 "2023-07-31T19:47:59Z")
I think it makes more sense to only have the tree, it lines up a little better with how reports are stored in ignition and it's a touch redundant to have both.