Hello @Joseph,
Regarding the first question:
You can specify the container for the quick-info popup using the “setContainer()” method. In order to set the “grid” as a container, you can use the syntax from our documentation(gantt.$grid):
gantt.ext.quickInfo.setContainer(gantt.$grid)
or you can get the grid element using jquery selector, like in the fragment below:
gantt.attachEvent("onTaskSelected", function(id){
var gridElement = document.querySelector(".gantt_grid_data")
gantt.ext.quickInfo.setContainer(gridElement)
});
Here is a demo:
http://snippet.dhtmlx.com/5/1c613e691
You can change the styles of the popup using the “.gantt_cal_quick_info” selector.
Reading the second question:
The behavior with “2 quick info dialogs” that you have occurred, was the result of using both:
gantt.plugins({
quick_info: true,
});
in the “CODE” part of the snippet, and:
<script src="https://docs.dhtmlx.com/gantt/codebase/ext/dhtmlxgantt_quick_info.js?v=20180322"></script>
in the “HTML” part.
So they were two different dialogs from two “different” extensions. When you will remove the extension, which is added in the script tag, the issue will be fixed.