Layout reordering problem

Developers
#1

I have a weird problem where the rendered layout of a tiddler is not according to the order of the wiki text. It is kind of hard for me to replicate in a clean wiki as it has to do with some hacks I have. So trying my luck to see if I can get an answer without one.

Consider this snippet from ElementWidget.render.prototype:

	// Invoke the th-rendering-element hook
	var parseTreeNodes = $tw.hooks.invokeHook("th-rendering-element",null,this);
	this.isReplaced = !!parseTreeNodes;
	if(parseTreeNodes) {
		// Use the parse tree nodes provided by the hook
		this.makeChildWidgets(parseTreeNodes);
		this.renderChildren(this.parentDomNode,null);
		return;
	}
	// Make the child widgets
	this.makeChildWidgets();
	// Create the DOM node and render children
	var domNode = this.document.createElementNS(this.namespace,this.tag);
	this.assignAttributes(domNode,{excludeEventAttributes: true});
	parent.insertBefore(domNode,nextSibling);
	this.renderChildren(domNode,null);
	this.domNodes.push(domNode);

The parseTreeNodes can be replaced in a listener of the th-rendering-hook, but when it is the line this.domNodes.push(domNode) is not called. Can this cause a change of layout sometimes? In my case an element that should be below the one where the parseTreeNodes was replaced is rendered above it.

#2

This is more something that belongs in the developer topic, with JavaScript a large number of community members canā€™t help you and you just scare them :nerd_face:

Not withstanding the above the first thing that comes to mind is one of your elements has different css been applied such as containing a ā€œpositionā€ or ā€œfloatā€.

  • The trick here is to use the browser Dev tools and inspect to see what css is applied.
  • Sometimes one layout method causes erratic behaviour with another that is normally fine.
#3

Moved to developers. Thanks.
The order changes in the HTML. One element appears before another

#4

So I created a wiki to demonstrate the problem: https://weird-layout.tiddlyhost.com/

It has a plugin ā€˜deliciousā€™ and two tiddlers under $:/customization.

To see the problem, go to $:/AdvancedSearch, and under the Bookmarks tab, note the layout of the result and in particular, that the list of tags appears at the buttom. In the description input, delete a character. Note that the layout changed and now the tags are above the entry.

The extlinks.js under $:/customization/ listens to the th-renderering-element hook and then only clones parseTreeNodes, changes the element type and returns it. The other tiddler just handles this type.

#5

All I can see is the order of the elements is hard coded yet they change order when the edit changes the description field in $:/AdvancedSearch, modifying this tiddler is not good practice.

  • Fix that and see if you still have a problem.
#6

I fixed the code to store the fields in a temporary tiddler. With that, the steps required to reconstruct the problem changed and are in the [[The Problem]] tiddler. The problem is still the same

#7

The starting condition is different as is the result. I will have a look again and see if I can see anything that may cause this.

Although I am not looking at the JavaScript.

1 Like
#8

This is a JS bug: [BUG] Node are not inserted correctly when the th-rendering-element hook returns an alternative parse tree node Ā· Issue #7503 Ā· Jermolene/TiddlyWiki5 Ā· GitHub

1 Like