SAPUI5 - 響應形式 - 在一排多列

Question

我喜歡與一些輸入字段，其中一些人是在下面的例子在一排彼此相鄰像創建SAPUI5頁：

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> 

但它沒有響應，就像你在這裏看到：

如果我在這個例子中使用的一種形式，如： 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> 

它響應：

但我必須爲小型設備滾動。我怎樣才能結合這兩個優點，以便我有一個響應式頁面，這在兩個設備上看起來都很好，而且我不需要在較小的設備上滾動。

Answer 1

我也有同樣的問題，使用sap.ui.Device.system勾畫這個問題來檢查設備類型。 也許這是一種替代方案：

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

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