0

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.stack.imgur.com/pPrRD.png

Tom Yeh
  • 1,987
  • 2
  • 15
  • 23
Giovanni Silva
  • 705
  • 5
  • 17

1 Answers1

0

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.

Community
  • 1
  • 1
Tom Yeh
  • 1,987
  • 2
  • 15
  • 23
  • In this case absolute position will complicate things. The children of panel have to be after the title and before a toolbar in the bottom. Do I need to calculate where the children will be positioned? The panel I plan will have title and a toolbar in the bottom like a SO window. So the position of the children is relative to title and the toolbar is relative to the children. In this case the panel is responsive (have the same aspect in all sizes) – Giovanni Silva May 13 '13 at 12:56
  • I'm not sure about the performance implications but I think the browser can layout this better because the application don't need be repositioned by code (twice layouts, by browser and by app) – Giovanni Silva May 13 '13 at 12:56
  • Did you check the example: [viewpoint](https://github.com/rikulo/ui/tree/master/example/viewport)? It might be helpful. – Tom Yeh May 14 '13 at 06:05
  • I'd say the browser provides more fantastic layout (especially CSS3) but less controllable comparing to desktop-like or mobile-like UI, which Rikulo focuses on. If CSS is what you need, you can use TextView and/or [Bootjack](http://blog.rikulo.org/posts/2013/May/General/bootjack-and-dquery/) -- a port of Bootstrap which really reveals the best of CSS. – Tom Yeh May 14 '13 at 06:06
  • Thank you very much, I will check the Viewport example and Bootjack – Giovanni Silva May 15 '13 at 04:21