How to change the inspector's select-box pickers render(to) el?

[Frank]

Hi guys,

Possible "bug"? :

I am utilizing the built-in fullscreen btn (but at the end of the day, this would affect any other fullscreen solution):

type: 'fullscreen',

target: this.el,

attrs: {

   button: {

      'data-tooltip': 'Toggle fullscreen',

      'data-tooltip-position': 'top',

   }

}

this.el is simply a div somewhere on the page. The fullscreen works as it should, the problem is the pickers (color palette, selectboxes) - you cannot expand them anymore. Well, you can, but they are render to the body which means the fullscreen element will cover them and they are basically invisible to the user (you can see the picker is expanded but it is not visible on the screenshot below):

There is a 'container' property on the stencil but I can't see anything similar for the inspector / selectbox (but maybe I am just blind once again). Is there some easy fix or do I have to work around it with mutation observer?

Thank you.

F.

[Frank]

Any feedback on this one?

[Roman Bruckner]

Hi Frank,

You can use `target` option for select-box / color (CSS selector of the container).

e.g. inputs: { color: { type: 'select-box',  target: '#app' }]

Adding `container` option sounds like a way to go though. Thank you, we'll add it.

Best,

Roman

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/59ef2c36-9084-4a53-8e6a-4eeb5b5b35d3n%40googlegroups.com.

--

Roman Bruckner, CTO

client IO

http://client.io

http://jointjs.com

+420 776 504 406

[Frank]

Awesome, I missed that one indeed. 

Thank you, helpful as always!

[Frank]

So I have just updated my code and dropped the 'observer' for the 'target' config (better late than never but as it was working well, there was no reason until now). All good but...

if your 'target' el doesn't stretch from side to side in the viewport and/or it has overflow hidden (or some ancestor) the picker/selectbox is cut off. You do check the edges of the window with `respectWindowBoundaries` but not of the 'target' el:

var overflow = this.calculateElOverflow(this.$options);

How about an option to respect also the 'target' el's boundaries? ->

var overflow = this.calculateElOverflow(this.$options, this.$target);

It would be nice.

[Roman Bruckner]

Hi Frank,

That's a very good suggestion. I'll add it to our list. Feel free to extend the `ui.Selection` plugin for now and override the `respectWindowBoundaries` method.

Thank you,

Roman

To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/c2e3674d-f965-4364-8bc0-9af3854d295en%40googlegroups.com.