Need help with custom form item layout

[mathias]

OK, use case:

I have a phone number field. I am trying to improve the entering of phone numbers. Right now we just have a textfield with validation.

So, i would like the user to select country, AND enter the phonenumber.
This means i cant have the icon and country names in the same text field where the user enters the phone number, since then the country names are what is put in the textfield when the user selects country. I basically need two formitems, one for the country select, and one for the msisdn text.


I have managed this, but i am trying to make it look good, which is not going so well...


Long story short: i would like it to look something like the image below. but the icons and textfields should be two different fields and not affect eachother.



All examples i've seen are strictly one formitem per row. I have done some CanvasItems for showing maps and similar in forms, do i have to use that here too, or is there some nifty way i haven't thought of?

Thoughts much appreciated.

[Isomorphic]

You can use 2 or more FormItems to do this - probably a SelectItem plus a TextItem for the phone input, where the TextItem will not show a title and column widths are carefully set to place everything close together.

To make this a reusable control your best approach is to use a CanvasItem. Otherwise the column widths needed for close placement will get in the way of other items in the same form.

[Blama]

Hi mathias,

try DynamicForm.setNumCols(3) and FormItem.setStartRow(false) and setShowTitle(false) for the TextItem.

Best regards
Blama

[mathias]

Thanks for input! Regarding canvasitem - i haven't used it to layout formitems before. I want the two items to be part of my form, but control their layout via the canvasitem.

I thought i'd add a HLayout and put the items in there, but formitems can't be added to a layout. What am i missing?

[Isomorphic]

The FormItems should be placed in a DynamicForm, which will then be part of a CanvasItem, inside of the main form.