How to set element positions with dart_web_toolkit?

248 views Asked by At

im new to dart and need to create a dynamic dom structure. At the moment i use the dart_web_toolkit but im missing a position function for elements. You can set the width and height but no position(top, left) for the element.

Am i missing something there, or can someone give me a solution for this?

Edit: I have a Label with 2 Buttons in it and i can edit the Buttons size with "setPixelSize" but i need something like "b1.setPosition" and i cant find this method to position my elements (in this example buttons). At the moment they are just put after another in relation to the Label.

final el = querySelector('#body');

ui.Label rootLabel = new ui.Label();
rootLabel.addStyleName("root-style");
ui.RootPanel.get().addWidget(rootLabel, el);

final el1 = querySelector('.root-style');

ui.Button b1 = new ui.Button();
b1.text = "Button 1";
b1.addStyleName("b1");
b1.setPixelSize(30, 50);
ui.RootPanel.get().addWidget(b1, el1);

ui.Button b2 = new ui.Button();
b2.text = "Button 2";
b2.addStyleName("b2");
b1.setPixelSize(60,60);
ui.RootPanel.get().addWidget(b2, el1);
1

There are 1 answers

1
Günter Zöchbauer On BEST ANSWER

I just looked a bit thought the code of https://github.com/akserg/dart_web_toolkit/blob/afac7aac09e3bcd9d3e1f926815eb85040e46e07/lib/src/ui/button_base.dart and it seems you should get the Element instance by calling b1.getElement() which should allow to access all elements properties like

b1.getElement().style
  ..position = 'absolute'
  ..top = '10px'
  ..left = '25px';

not tested though.