Text Displaces from its place when placed in an hbox

Support
#1

I am using a form, and I need to put a button beside a field. I figured an HBOX would do the trick, but it ruins the formatting on the fieldName. is there a fix for this?

-the text “Regstration Number” should be beside the form field
image

#2

Hi.
You can simply add another column to the Form component and then putt the button in the column.

<form id="form" dataContainer="demoDc">
    <column width="350px">
         <textField id="firstAttributeField" property="firstAttribute"/>
         <textField id="secondAttributeField" property="secondAttribute"/>
         <textField id="thirdAttributeField" property="thirdAttribute"/>
         <textField id="fourthAttributeField" property="fourthAttribute"/>
    </column>
    <column>
         <button caption="Test Button"/>
    </column>
</form>

image

Regards,
Natalia

#3

Natalia, thank you, that solution is exactly what I came up with, but sadly it’s not something that works for us, because the space on some of the forms is really limited. I wanted the column to look like this:

image

(that image is photoshopped to look like that, I have not found a working solution yet)

my code for this column is:

       <column width="300px">
                <hbox spacing="true">
                    <textField id="firstAttributeField" property="firstAttributeField"
                               caption="msg://caption"/>
                    <button id="btnTest" caption="Test Button"/>
                </hbox>
                <textField id="secondAttributeField" property="second"/>
                <textField id="thirdAttributeField" property="third"/>
                <textField id="fourth" property="fourth"/>
            </column>
#4

Hi @arturoams,

The form component supports the colspan and rowspan attributes.

In your case, if you use colspan you’ll be able to achieve what you want:

image

<form id="form" dataContainer="demoEntityDc">
    <column width="350px">
        <textField id="firstAttributeFieldField" property="firstAttributeField" />
        <textField id="secondAttributeFieldField" property="secondAttributeField" colspan="2" width="100%"/>
        <textField id="thirdAttributeFieldField" property="thirdAttributeField" colspan="2" width="100%"/>
        <textField id="fourthAttributeFieldField" property="fourthAttributeField" colspan="2" width="100%"/>
    </column>
    <column width="150px">
        <button caption="Test Button" />
    </column>
</form>

Regards,
Peterson.

3 Likes
#5

thank you very much that is exactly what I was Looking For