Component-group length in Form

Support
#1

Hello,

how can I get the component-group in a form to be displayed in the same length as the other fields in the column?

field

...
 <form dataContainer="formularDc" width="100%">
     <column width="100%" childrenCaptionWidth="120px">
         <cssLayout id="numberFieldBox" caption="msg://de.agentes.test.entity.vertrieb/Formular.nummer" width="100%" stylename="v-component-group">
             <textField id="numberField" dataContainer="formularDc" required="true" property="nummer.stringValue"/>
             <button id="numberEditorBtn" stylename="icon-only" icon="EDIT"/>
         </cssLayout>
         <dateField id="datumField" property="datum"/>
         <dateField id="lieferDatumField" property="lieferDatum"/>
         ...                                   
    </column>
</form>
...

I tried to set the width of the fields to 100%, but that didn’t help.

Many thanks and best regards
Andreas

#2

Hi,

The following should help:

  • Set width="100%" for the nested <textField>
  • Add css="display: flex" attribute for the <cssLayout> 
<form width="100%">
    <column width="100%" childrenCaptionWidth="120px">
        <cssLayout id="numberFieldBox" caption="Caption" width="100%"
                   stylename="v-component-group"
                   css="display: flex">
            <textField id="numberField" width="100%"/>
            <button id="numberEditorBtn" stylename="icon-only" icon="EDIT"/>
        </cssLayout>
        <dateField id="datumField" caption="Caption"/>
        <dateField id="lieferDatumField" caption="Caption"/>
    </column>
</form>

Screenshot 2021-04-08 at 13.20.21

Gleb

1 Like
#3

Hi @gorelov,

it worked like a charm.

Thanks
Andreas

#4

Hi @gorelov,

I still have a question about your solution. The button in the field is somewhat narrower than that of the date fields:

image

What do I have to set so that they are the same size?

Greetings,
Andreas