SAPUI5 - reaktions Form - mehr als eine Spalte in einer Zeile

Question

Ich mag eine SAPUI5-Seite mit wenigen Eingabefelder zu schaffen, wo einige von ihnen miteinander, wie im folgenden Beispiel in einer Reihe neben sind:

https://plnkr.co/edit/jgkos97pTJNsKj1WQQZN?p=preview

<Page title="test" showNavButton="true" navButtonPress="onNavButtonPressed"> 
    <content> 
     <Panel height="100%"> 
      <content> 
       <l:Grid> 
        <l:content> 
         <VBox> 
          <Label text="test1" /> 
          <Input value="test1"></Input> 
          <layoutData> 
           <l:GridData span="L6 M6 S6" /> 
          </layoutData> 
         </VBox> 
         <VBox> 
          <Label text="test2" /> 
          <Input value="test2"></Input> 
          <layoutData> 
           <l:GridData span="L6 M6 S6" /> 
          </layoutData> 
         </VBox> 
         <VBox> 
          <Label text="test3" /> 
          <Input value="test3"></Input> 
          <layoutData> 
           <l:GridData span="L6 M6 S6" /> 
          </layoutData> 
         </VBox> 
         <VBox> 
          <Label text="test4" /> 
          <Input value="test4"></Input> 
          <layoutData> 
           <l:GridData span="L6 M6 S6" /> 
          </layoutData> 
         </VBox> 
         <VBox> 
          <Label text="test5" /> 
          <Input value="test5"></Input> 
          <layoutData> 
           <l:GridData span="L12 M12 S12" /> 
          </layoutData> 
         </VBox> 
         <VBox> 
          <Label text="test6" /> 
          <Input value="test6"></Input> 
          <layoutData> 
           <l:GridData span="L12 M12 S12" /> 
          </layoutData> 
         </VBox> 
        </l:content> 
       </l:Grid> 
      </content> 
     </Panel> 
    </content> 
    <footer> 
     <Bar> 
      <contentRight> 
       <Button text="weiter" type="Accept" /> 
      </contentRight> 
     </Bar> 
    </footer> 
</Page> 

Aber es ist nicht ansprechbar, wie Sie hier sehen:

Wenn ich eine Form wie in diesem Beispiel verwenden: https://plnkr.co/edit/RRRBGYhQRVoY7ATouKmQ?p=preview

<Page title="test" showNavButton="true" 
    navButtonPress="onNavButtonPressed"> 
    <content> 
     <f:Form class="sapUiResponsiveMargin" editable="true"> 
      <f:layout> 
       <f:ResponsiveGridLayout 
        labelSpanXL="3" 
        labelSpanL="3" 
        labelSpanM="3" 
        labelSpanS="12" 
        adjustLabelSpan="false" 
        emptySpanXL="4" 
        emptySpanL="4" 
        emptySpanM="4" 
        emptySpanS="0" 
        singleContainerFullSize="true" /> 
      </f:layout> 
      <f:formContainers> 
       <f:FormContainer> 
        <f:formElements> 
         <f:FormElement label="test1"> 
          <f:fields> 
           <Input value="test1"></Input> 
          </f:fields> 
         </f:FormElement> 
         <f:FormElement label="test2"> 
          <f:fields> 
           <Input value="test2"></Input> 
          </f:fields> 
         </f:FormElement> 
         <f:FormElement label="test3"> 
          <f:fields> 
           <Input value="test3"></Input> 
          </f:fields> 
         </f:FormElement> 
         <f:FormElement label="test4"> 
          <f:fields> 
           <Input value="test4"></Input> 
          </f:fields> 
         </f:FormElement> 
         <f:FormElement label="test5"> 
          <f:fields> 
           <Input value="test5"></Input> 
          </f:fields> 
         </f:FormElement> 
         <f:FormElement label="test6"> 
          <f:fields> 
           <Input value="test6"></Input> 
          </f:fields> 
         </f:FormElement> 
        </f:formElements> 
       </f:FormContainer> 
      </f:formContainers> 
     </f:Form> 
    </content> 
    <footer> 
     <Bar> 
      <contentRight> 
       <Button text="weiter" type="Accept" /> 
      </contentRight> 
     </Bar> 
    </footer> 
</Page> 

es reagiert:

aber ich habe blättern auf kleinere Geräte . Wie kann ich beide Vorteile kombinieren, sodass ich eine responsive Seite habe, die auf beiden Geräten gut aussieht und auf kleineren Geräten nicht blättern muss?

Answer 1

Ich habe auch das gleiche Problem, umreißen Sie dies mit sap.ui.Device.system, um den Gerätetyp zu überprüfen. Vielleicht ist es eine Alternative:

if(sap.ui.Device.system.tablet && !sap.ui.Device.system.desktop){ 
    ...tablet related commands... 
} 

https://openui5.hana.ondemand.com/#/api/sap.ui.Device.system