は、私は、フォーム以下含むダイアログを持つ入力フィールド

Question

の幅を決定します。入力？比率は3：1でなければなりません。

シンプルなフォームのコードスニペット：

<f:SimpleForm id="form-add-item" 
        maxContainerCols="2" 
        editable="true" 
        class="editableForm"> 
     <f:content> 
      <l:VerticalLayout> 
      <Input value="{vmNewItem>/sPlant}" placeholder="{i18n>insColPlant}"/> 
      <Input value="{vmNewItem>/sWorkCenter}" placeholder="{i18n>insColWorkCenter}"/> 
      <l:HorizontalLayout> 
       <Input value="{vmNewItem>/sUsualDay}" placeholder="{i18n>insColUsualDay}"> 
       <layoutData> 
        <l:GridData span="L2 M2 S4" linebreak="true"/> 
       </layoutData> 
       </Input> 
       <Input value="{vmNewItem>/sUsualDayVer}" placeholder="{i18n>insColUsualDayVer}"> 
       </Input> 
      </l:HorizontalLayout> 
      <l:HorizontalLayout> 
       <Input value="{vmNewItem>/sSpecialDay}" placeholder="{i18n>insColSpecialDay}"/> 
       <Input value="{vmNewItem>/sSpecialDayVer}" placeholder="{i18n>insColSpecialDayVer}"/> 
      </l:HorizontalLayout> 
      </l:VerticalLayout> 

     </f:content> 
     </f:SimpleForm> 

Answer 1

これを達成することができ、いくつかの方法があります。 SimpleFormコントロールを使用している場合は、ResponsiveGridLayoutを使用して、次のようにlayoutDataを指定します。

<f:SimpleForm id="form-add-item" 
       maxContainerCols="2" 
       editable="true" 
       class="editableForm" 
       layout="ResponsiveGridLayout"> 
     <f:content> 
      <Input value="{vmNewItem>/sPlant}" placeholder="{i18n>insColPlant}"> 
       <layoutData> 
        <l:GridData span="L12 M12 S12" /> 
       </layoutData> 
      </Input> 
      <Input value="{vmNewItem>/sWorkCenter}" placeholder="{i18n>insColWorkCenter}"> 
       <layoutData> 
        <l:GridData span="L12 M12 S12" /> 
       </layoutData> 
      </Input> 
      <Input value="{vmNewItem>/sUsualDay}" placeholder="{i18n>insColUsualDay}"> 
       <layoutData> 
        <l:GridData span="L9 M9 S9" /> 
       </layoutData> 
      </Input> 
      <Input value="{vmNewItem>/sUsualDayVer}" placeholder="{i18n>insColUsualDayVer}"> 
       <layoutData> 
        <l:GridData span="L3 M3 S3" /> 
       </layoutData> 
      </Input> 
      <Input value="{vmNewItem>/sSpecialDay}" placeholder="{i18n>insColSpecialDay}"> 
       <layoutData> 
        <l:GridData span="L9 M9 S9" /> 
       </layoutData> 
      </Input> 
      <Input value="{vmNewItem>/sSpecialDayVer}" placeholder="{i18n>insColSpecialDayVer}"> 
       <layoutData> 
        <l:GridData span="L3 M3 S3" /> 
       </layoutData> 
      </Input> 
     </f:content> 
    </f:SimpleForm>