How to flex TextField in qooxdoo mobile

Question

I'm trying to add a row on a qx.ui.mobile.page.NavigationPage consisting of a label, a text field, and a button. I want the text field to take up any extra horizontal space (the row should span the screen horizontally). I thought this would work:

      var comp = new qx.ui.mobile.container.Composite();
      comp.setLayout(new qx.ui.mobile.layout.HBox(null, 'middle'));

      comp.add(new qx.ui.mobile.basic.Label("Filtering:"));
      var f = new qx.ui.mobile.form.TextField();
      comp.add(f, {flex:1});
      var b = new qx.ui.mobile.form.Button("Update");
      comp.add(b);

      this.getContent().add(comp);

but it doesn't (see http://tinyurl.com/nwlhtwq for a playground example). What am doing wrong? Thanks!

Answer 1

Have a look at this example:

http://tinyurl.com/nmw6lgs

It is because the textfield has a "display:inline-block" by default, and width of 100%.

Please set these properties:

qx.bom.element.Style.set(textField.getContentElement(),"display","block");
qx.bom.element.Style.set(textField.getContentElement(),"width","auto");

We will fix that in framework, too.