How to configure horizontal layout for aem touch ui dialog - dialog

Question

I have a touch ui requirement where I need to place 2 text boxes side by side like the older ExtJs size widget. Is there a layout I can set to item to place those objects next to each other. For the older implementation I had written a custom widget with hbox layout. I think this should be supported now but cant find it in the docs. Any references will help. Thanks

Answer 1

You should use fixedColumn layout
Please note that you will not see the columns in floating dialog mode, this layout is intended for fullscreen dialog, see the screenshots.
Here is an example I put together:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Sample"
sling:resourceType="cq/gui/components/authoring/dialog"
mode="edit">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<col1
jcr:primaryType="nt:unstructured"
jcr:title="General"
sling:resourceType="granite/ui/components/foundation/section">
<items jcr:primaryType="nt:unstructured">
<filed1col1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="sample filed1col1"
fieldLabel="filed 1 col 1"
name="./filed1col1"/>
</items>
</col1>
<col2
jcr:primaryType="nt:unstructured"
jcr:title="Phone Numbers"
sling:resourceType="granite/ui/components/foundation/section">
<items jcr:primaryType="nt:unstructured">
<filed1col2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="sample filed1col2"
fieldLabel="filed 1 col 2"
name="./filed1col2"/>
</items>
</col2>
</items>
</columns>
</items>
</content>
</jcr:root>
Dialog in floating mode
dialog in fullscreen mode
As it is the case with any dialog related questions, you can write your own CSS to achive this functionality, however, you run the risk of dialog markup/classes changing in future which will render your CSS useless.