Problem/Motivation

Similar to https://www.drupal.org/project/entity_reference_tree/issues/3068466

When the modal opens and there are only a few main nodes that are closed, the modal gets the correct height, and is centered. When the nodes are opened, the modal resizes, but is not recentered.
This results in the bottom of the modal disappearing at the bottom of the screen.

When the modal opens and there are enough main nodes, so that the modal goes to the maximum height, there is no problem.

Steps to reproduce

- Taxonomy tree with small number of nodes on level 1
- Open taxonomy tree with no items selected and nodes collapsed
- Click to open nodes

Possible resolution

The modal can be resized when opening/closing a node by triggering resize.dialogResize. This updates the top of the dialog, but this results in the modal jumping up and down, which is not very nice.

Maybe the modal can be opened at full screen height straight away, regardless of the content.

CommentFileSizeAuthor
tree_open.png86.37 KBducktape
tree_closed.png53.91 KBducktape

Issue fork entity_reference_tree-3197987

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

ducktape created an issue. See original summary.

matt_paz’s picture

matt_paz commented

Just confirming that we too are experiencing this issue.

coaston’s picture

coaston commented
Version: 2.0.0 » 2.x-dev
Priority: Normal » Critical

I am changing priotity as this is critical issue. This module is not usable when using more taxonomy terms. Experiencing the same issue.

coaston’s picture

coaston commented
Status: Active » Needs review

I found out that auto still not working right, however direct value looks good.
Replace in js/entity_reference_tree.js

- $("#entity-reference-tree-modal").dialog( "option", { height: 'auto' } );
+ $("#entity-reference-tree-modal").dialog( "option", { height:'650' } );

Does work. However still think we do not need to show selected items under the selected tab so would suggest to remove :

              $("#entity-reference-tree-selected-text").text(
                Drupal.t("Selected") + " (" + choosedNodes.length + " " + Drupal.t("of") + " " + remaining + "): " + selectedText
              );

billdaff made their first commit to this issue’s fork.

billdaff opened merge request !12

billdaff’s picture

billdaff commented

Opened up an MR to help with this. I am not sure if it achieves all that you want, I incorporated some of the changes above. I left height as auto, but set max-height to 450px. Not sure if this is exactly the course you were looking to go, but it resolved for me.

mingsong’s picture

mingsong
Location 🇦🇺
commented

There is an error with the automated PHPUnit test.

1) Drupal\Tests\entity_reference_tree\FunctionalJavascript\BasicJavascriptTest::testEntityReferenceTreeJavascript
Behat\Mink\Exception\ResponseTextException: The text "Selected (3 of unlimited): Node 1 (1), Node 2 (2), Node 3 (3)" was not found anywhere in the text of the current page.

https://git.drupalcode.org/issue/entity_reference_tree-3197987/-/jobs/26...

Is there anyone know why? We can merge a MR that is failed from test.

mingsong’s picture

mingsong
Location 🇦🇺
commented
Status: Needs review » Needs work
mingsong’s picture

mingsong
Location 🇦🇺
commented

Ok, first the selected nodes tip is required by others, we can't remove this feature. And second, I don't think hard-code the hight would fit all size of screen.

kostyashupenko made their first commit to this issue’s fork.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Needs work » Needs review

I cleaned up merge request. The original issue was in the fact - on nodes expansions it didn't trigger dialogResize event. Now it's working, so your dialog will adjust itself

mingsong’s picture

mingsong
Location 🇦🇺
commented

Thanks @Konstantin

The latest fix makes sense to me by reading the code.

// Triggering dialogResize event on node expansion
            treeContainer.on('after_open.jstree after_close.jstree', function (e, data) {
              $(window).trigger('resize.dialogResize');
            });

  • mingsong committed b0f8c4ba on 2.x 
    Revert "Issue #3197987: Addressed size of modal issues."

  • mingsong committed 8469cb9b on 2.x 
    [#3197987] feat: Modal autoresize causes bottom of the modal to...
mingsong’s picture

mingsong
Location 🇦🇺
commented
Status: Needs review » Fixed

Patched with 2.x-dev

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.