Creating a Rikulo custom view and give his children correct position

Question

Why everything has absolute position? I'm trying to make a Panel with a title, the title is behind the child nodes of the panel, because the children are in absolute position. How I can build custom views if they not respect my layout? I want control in where the childs are place. I don't like this approach could someone clear my mind?

Here is the simple code example:

class MyPanel extends View {
 String title;
 MyPanel() {
 }
  @override
  Element render_() =>
  new Element.html('<div class="v-shadow"><div class="v-title">$title</div><div class="v-inner" id="$uuid-inner"></div></div>');
}

This is the result screenshot, the title is a dashed blue border

https://i.sstatic.net/pPrRD.png

Answer 1

Yes, the absolute position is designed on purpose. In short, it ensures the views in Rikulo are 100% controllable. For more about the philosophy behind it, please refer to here and here.

Unlike CSS, the position is controlled by your application (in Dart) or by use of the layout manager, such as linear layout and anchor layout. Of course, you can provide your own layout too.

If CSS layout is what you want, you can embed the HTML fragment with TextView.fromHtml.

Notice: you HTML fragment of MyPanel shall be controlled by CSS, since only the view (i.e., MyPanel in your case) is absolute positioned. The tags generated by render_() won't be.