The Ztree component was used to maintain the tree structure when doing the project. I did not expect to encounter a problem:
The right-click menu of the Ztree component could not be displayed correctly, and the position was always incorrect.
This was just integrated. It was completely integrated when there was no front-end page. Easy to use!
Right-click on the element, you will find that the pop-up menu is always displayed at the bottom right!
Later, I found that the width and height of the red arrow area is roughly the same as the blue distance difference.
That is to say: there is just a problem with the upper and lower borders.
So I wonder if it is a problem of layout positioning, because there was no front-end template before, so it was normal.
The click position obtained by ztree is exactly the absolute positioning (calculated by the edge of the screen), and the display menu is calculated using the parent DIV. After adding the template, the parent DIV does not start from the edge of the web page, so the display position Deviations will occur!
In this case, just change the parent DIV to an absolute positioning starting from the edge of the page:
style="position: fixed"
Everything is normal after joining!
In fact, since it is an error caused by a positioning problem, it is actually possible to put DIV directly on the outermost layer (the same at the beginning)
However, template engine inheritance is usually used in project development, so it is difficult to put it in the top-level body unless the parent page is changed. If the parent page is changed, this is another garbage code in other pages that do not use Ztree, and the gain is not worth the loss!
So just join directly!