CODEWITHSUNDEEP
qooxdoo
dinghui
dinghui

Reputation: 23

qx.ui.form.Button () How to implement label alignment

enter image description here

var button1 = new qx.ui.form.Button("Button", "http://www.qooxdoo.org/current/widgetbrowser/resource/qx/icon/Tango/48/devices/camera-photo.png");
button1.setIconPosition("bottom");
button1.setWidth(200);

this.getRoot().add(button1,{ top: 20, left: 20 });

playground：tinyurl.com/y9rlxpxt

How to achieve the effect shown in the figure, label left alignment, icon center？

Upvotes: 1

Views: 286

Answers (2)

geonik
geonik

Reputation: 181

You can work with the atom's child controls. The solution to your problem is:

button1.getChildControl("label").setAllowGrowX(true);
button1.getChildControl("label").setTextAlign("left");

Upvotes: 0

johnspackman
johnspackman

Reputation: 1003

The positioning of the label and the icon is taken care of by the qx.ui.layout.Atom class, and while it does allow for the position of the icon to be customised, the text is positioned automatically.

Currently, there is no easy way already built into Qooxdoo to achieve what you're looking for - however, the way to solve the problem would be to look at qx.ui.layout.Atom and write your own version - that would give you complete control over how the image and icon are positioned.

Once you've written the custom layout, you would apply it to each button by simply button1.setLayout(new mypackage.MyCustomAtomLayout());

Upvotes: 1

Related Questions