Dropdown Events and Dynamic View Size

Ignition
1

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

image
image291×547 10.3 KB

2

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 you could apply a transformation to the tree.

.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.

3

Thanks for the reply.

I must be implementing the CSS incorrectly. I am placing the following code in my style class Reports/TreeDropdownSpace.

.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
image979×738 38 KB

4

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?

2 Likes
5

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

6

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?

7

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.

8

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:

9

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.