Jsoneditor: Hidden (clipped) context menu

[nnseva]

When the editor div is placed inside another one, the context menu appears hidden/clipped by the outer div.
This happens only in version 5 of the editor. Version 4 works properly.

version 5 example vs version 4 example

[josdejong]

Thanks for bringing this up.

The issue with the correctly working version 4 is that it didn't work correctly when used inside for example bootstrap modals and that sort of situations (see also #104). Therefore I went "back to the basics" with a simple inline div instead of an absolutely positioned one. I think it is a bit of an edge case: if you create the editor this small it's not really usable anyway, or is it?

[nnseva]

Really I am using your JSON editor in the Django application to edit a field of the record, see there. Having multiple editing fields on one page we need to have a JSON editor window as small as possible.

I would suggest you create some customization feature allowing to choose where the context menu should be created - either inline or absolute.

[josdejong]

Really I am using your JSON editor in the Django application to edit a field of the record, see there. Having multiple editing fields on one page we need to have a JSON editor window as small as possible.

I understand, thanks for explaining.

I would suggest you create some customization feature allowing to choose where the context menu should be created - either inline or absolute.

Ideally, the context menu should "just work" and be absolutely positioned instead of inline. It will require some effort though to get that right in all circumstances, but should be solvable. Probably attach to the container of the JSONEditor instead of the document body to maintain encapsulation. Customizing it could be an option but that's just moving the problem to the user, I would rather like to solve it for real.

I don't expect to find time to solve this short term, help would be welcome.

[dvarrazzo]

Could you implement an onMenu() callback to call when ContextMenu is displayed to allow users in the corner case of a small editor to customize how the menu is displayed?

[dvarrazzo]

Note: see this comment for an example of the customisation that can be made in an app using the the menu to fix the problem.

[chaud]

We've fixed this in our application (which has no modals) with an overflow: visible on div.jsoneditor-tree: (Example)

Granted, this isn't a fix for special cases, but I came across this and #368 when looking for a solution and wanted to add a workaround for some cases.

[josdejong]

I think we can close this issue, since some time we're back to using an absolutely positioned menu which overflows the editor, it should work out of the box with the latest version of jsoneditor.

[chaud]

It currently does work out of the box, unless clicking on an empty object. Clicking on the anchor to open the actions menu next to "(empty object)" results in a clipped menu. The same goes for the empty array line in this example.

[josdejong]

ah, good find! That is a bug and should be fixed. I will reopen this issue.

[josdejong]

Fixed via 9e3b6fb19655d21e259666221cb97b36fa99ce99 (not yet published)

[nnseva]

The wonderful news! Don't miss to remove padding-bottom: 300px workaround from div.jsoneditor-tree div.jsoneditor-tree-inner.

[josdejong]

Good point @nnseva , that's totally redundant now :D

[josdejong]

This should be fixed now in v5.32.2

[ozcanyarimdunya]

I am using v5.32.5 but i came across with same problem. :(

[josdejong]

How to reproduce your issue @ozcanyarimdunya ?

To be sure, I created a jsbin with the latest version 6.0.0 (shouldn't differ from 5.32.5 in this regard):

https://jsbin.com/rujegux/edit?html,output

In this demo the menu does overflow as it should.