Dropdown Popup over flex container

Ignition
,
1

I want to implement something like below screenshot (from this forum, when creating a topic), alternative for multi-select of dropdown:
image

On flex container I have my dropdown component.
when this is click, i want to show the popup just below the dropdown component.

I cannot find the position of dropdown component in flex container? for the popup position to co-related with dropdown position.

2

That component is probably written in Javascript by the Discourse forum software. You are correct that you can't find a component position in a flex layout in Perspective.

What's the real problem that you are trying to solve? The dropdown with,
multiSelect : true
search.enabled : true
should do most of what you need.

3

A fancy display to be able to see which options are selected on the dropdown.

Here is the post the describe the limitation of current dropdown component:

I was about to use a popup over a flex container, but faced a hard wall since I cannot get dropdown position, so I cannot place popup just below the dropdown.

1 Like
4

You could build this using a container with position absolute (so it lives out of the regular flex flow and on top the other DOM elements), and a binding on the display property.

5

I tried playing with the position but in the end it doesn't really matter, the only way I found to make it work is to set overflow: visible on the component itself AND its instances when you place them in a view. That's it, that's all you need.
The component itself can be flex or coordinate, doesn't matter.
You'll also need to make sure its z-index is lower than what's under the dropdown, otherwise it won't cover it. Or, you know, just click this: image

6

I am trying to digest, the above replies but couldn't exactly grasp how to implement.

Are you guys saying, when clicked, I can set to reduce/extend the container, and let the extension overflow?

Edit:
I saw under style, there is a "position" style. But I have no idea what this CSS Property does.

7

Don't worry about it.
Make the view as high as the base text field and button, something like 32px I guess.
On the root container, add a overflow: visible style.
Then make the options panel where ever you want, outside of the view's boundaries.

When you place your dropdown in a view, check the useDefaultViewHeight property, make sure the embedded view is the right height (32px), and add the overflow: visible property here as well.
Make sure it's on top of other components by clicking image or setting a z-index style.

That's it.
I'm trying to figure out if there's a way to make things simpler, maybe through css, but it's already quite simple.

8

The only way i see this working is with js, but its not that simple as just to ask the position. You'll also have to make sure the popup actually fits on the screen (if your button is on the bottom of the page ,you'll want the popup to open above...)
Its all really just to much work imho, when there already is a multislect dropdown

9

Seems much simpler to get rid of the popup entirely and just use an overflowing container

1 Like
10

Anyways if he really wants to fiddle aronud with it, here is some js demo to location/size of the component and screen
bound.zip (12.9 KB)

Add a class to your component you want to measure, and link it with the markdowns binding.
The js will write to the view.custom[propName]

	propName="bounds"
	code =  """<img style='display:none' src='/favicon.ico' onload=\"
		const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; 
		function getBounds(ev) {			
			var w = window.innerWidth;
			var h = window.innerHeight;
			const b = ev.target.getBoundingClientRect();
			const retProps = {windowHeight:h,windowWidth:h, elementBounds:{bottom:b.bottom,top:b.top,right:b.right,left:b.left}}			
			view.custom.write('"""+propName+"""',retProps);
		};			
		const elements = document.querySelectorAll('"""+value.class+"""').forEach(e => {					
									e.onclick = getBounds;																										
								});	
	\"></img>""".replace("\n", "").replace("\t", "")
	return code
11

Thanks. It worked. So far.
I played with position=absolute and overflow=visible

I have a small view (flex column with two section) - the top section when click will toggle the display of the bottom section.

In the root of small view, style, is set to position=absolute (together with width=something style)

This small view, I drag to large flex view. and set that flex section to overflow=visible.

Only bad is, I cannot justify. but is always on left edge.. Should be ok.
image

image

Could not gone this far, if not for your posts.

Thanks.

Edit: If only I could find an event where user click away from the dropdown box, I can make it collapse automatically.

1 Like