We are using TMS Web Core 2.5.4.0 and FNC UI Pack 5.6.0.0.
We have a main form which uses an off the shelf HTML template. The off the shelf HTML template has a div element to which our content forms are attached just as described in the TMS Web Core Developers Guide's Use off the shelf HTML Templates section.
In a content form, we have a TWebPanel component which wraps a TMSFNCKanbanBoard component. The TWebPanel component is associated with an HTML div element in the content form's HTML file. Though the FNC control is displayed, we encountered the following issues:
With the off the shelf HTML template used in the Web Core Developers Guide (creative-tim), the FNC control was not placed correctly. It was always placed too much to the right.
With another off the shelf HTML template (html5up-editorial), the FNC Kanban board items are not selectable and thus cannot be moved. If we move the div for the content form directly after the body tag in off the shelf HTML template (main form's HTML file), Kanban board item selection works.
Only FNC controls seem to be to have a problem with placement and selection, TWebXYZ-Controls which correspond to a HTML element work ok.
Do you have more details? I did a couple of tests with our demos (like TemplateUI) but I could not see an issue. If a problem persists, try to isolate and provide a sample source project with which we can reproduce the issue here.
I have setup two TMS Web Core projects one for each issue (off the shelf HTML template). The zip files are about 4 and 7 MB in size. How and to whom can I post them?
We found out that both issues are related to element positioning of controls.
As we understood, an FNC control is always positioned relatively to its container, e.g. a TWebPanel, and therefore, an FNC control's ElementPosition property is not published.
And yes, initially the FNC control is positioned relatively to its container.
But the FNC control's ElementPosition property is still there and absolute by default.
So if there are mouse clicks, the FNC's actual position is computed according to it's ElementPosition property which is absolute and mouse clicks will be outside the FNC control's (relative) rectangle in most cases.
It gets even worse, if you scroll down your web page and click an FNC control. It then moves up outside its container boundaries which is ok according to the ElementPosition property but not ok according to the relative position to its container.
Unfortunately, setting the container's and FNC's ElementPosition property programmatically to relative doesn't solve the problem, since the FNC control's vertical scroll bar and an FNC Kanban board's table and tree views are drawn elsewhere.
We would really appreciate to see these issues fixed in a beta version of a new FNC Core / FNC UI Pack version to proceed with our Web application development.
We now moved to TMS Web Core 2.6 beta and the newest versions of FNC Core (3.1.7.1) and FNC UI Pack (6.0.0.0).
We still found 6 issues with FNC controls:
Double-click on FNC Kanban board item does not always work.
If browser window's vertical scroll bar is not positioned top, the FNC Kanban board (or any other FNC control) moves up out of its parent,
if you click the free area next to the right-most column of the board,
if you resize the browser window,
if you want to drag a Kanban board item.
If you resize a memo which is located above the board, a web control below the memo is moved, but the FNC control is not.
If you collapse the sidebar, web controls are moved to the left, but the FNC control is not.
We just installed TMS Web Core V2.6 release of Oct 22 and checked the 6 issues again. While the double-clicking issue is resolved now, the others are not.
We just installed TMS Web Core 2.6.1.1, TMS FNC Core 4.0.1.0 and TMS FNC UI Pack 6.0.1.1 and now all issues again appear as being not resolved, even the double-click issue which seemed to be resolved with the Web Core 2.6.0.0 release.
We did not do any changes between 2.6.0.0 and 2.6.1.x in layout handling.
We simply did not have sufficient time to debug extremely complex layout handling with foreign templates.
When a HTML element gets focus and the HTML element is partially displayed and is given focus, the browser will try to scroll to make the HTML fully visible. This causes the vertical scrolling when the Kanban board is clicked
Controls are realigned now when the browser resize event is triggered. By default, there are no observers on any possible other HTML element that might get resized and therefore should cause other controls to be realigned. Doing this by default and just for any HTML element would affect performance. In this case, the memo and label can get resized, and thus, this resize should trigger that the Kanban board is realigned (repositioned). So, you'd need to install a ResizeObserver on such elements that might cause the Kanban board to be resized and from there, an easy solution is to cause the window 'resize' event that invokes a realign of the form anyway. This sample code added to your form handles this for when the memo is resized and could be attached to the labels as well.
<script>
const resizeCallback = (entries) => {
for (let entry of entries) {
const width = entry.contentRect.width;
const height = entry.contentRect.height;
console.log(`Textarea resized to: ${width}px x ${height}px`);
// You can add more logic here, e.g., adjust font size, update layout, etc.
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
}
};
const textarea = document.getElementById('memokanbanboard');
const observer = new ResizeObserver(resizeCallback);
// Start observing the textarea
observer.observe(textarea);
</script>
Ok, that clarifies things. Thank you for your feedback. We already implemented such a ResizeObserver pattern and we now know that it was the right way to go.