SAPUI5 - Responsive sap.m.Table

我用它的頭文件headerToolbar創建了一個sap.m.table。SAPUI5 - Responsive sap.m.Table

在標題中，我將標題和兩個SelectList分隔開，並由ToolbarSpacer分隔。

的問題是，當屏幕尺寸較小的headerToolbar元素不回去到下一行，並截斷......

在大屏幕上：

在小屏幕上：

我想報頭是respons如果沒有足夠的空間，那麼元素應該到達下一行。

下面是代碼：

<headerToolbar height="auto"> 

<Toolbar height="auto"> 

      <content> 

      <Title id="tableHeader" text="..."/> 

      <ToolbarSpacer /> 

      <Label text="..." lableFor="sl1"/> 
       <SelectList id="sl1" 
       enabled="true"> 
       <core:Item key="..." text="..." /> 
       <core:Item key="..." text="..." /> 
       </SelectList> 

       <ToolbarSpacer /> 

      <Label text="..." lableFor="sl2"/> 
       <SelectList id="sl2" 
       enabled="true"> 
       <core:Item key="..." text="..." /> 
       <core:Item key="..." text="..." /> 
       </SelectList> 

       <ToolbarSpacer /> 

       </content> 

      </Toolbar> 

     </headerToolbar>

來源

2017-04-24 Simo03

爲什麼不使用OverflowToolbar而不是工具欄？是官方的響應工具欄 https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.OverflowToolbarFooter/preview

如果你不喜歡它，並希望你所描述的這種「彈出式」的行爲，我想你可以把你的Flexbox的工具欄裏面，並設置取決於方向屬性「設備」模型。使用表達式綁定將是這樣的：

new sap.m.FlexBox({ 
    direction: "{= ${device>/isPhone} ? 'Column' : 'Row' }", 
    items: [ 
     //Your content goes here    
    ] 
})

來源

2017-04-24 13:24:55

它的工作。你知道如何在FlexBox中的元素之間放置空間嗎？使用工具欄我曾經使用ToolbarSpacer，但對於FlexBox我需要類似的東西... – Simo03

您可以在內部控件中設置保證金類： –

您可以在內部控件中設置保證金類： 'new sap.m.Label （{text：「labelText」class =「sapUiLargeMargin」}）' https://help.sap.com/saphelp_uiaddon10/helpdata/en/77/7168ffe8324873973151dae2356d1c/content.htm 或使用sap.ui.layout。網格以響應的方式管理您的間距。在網格內放FlexBoxes https://experience.sap.com/fiori-design-web/grid-layout/ –

您可以啓用水平表中的CSS滾動：

.enableTableScrolling { 
    overflow-x: scroll; 
}

之後表將不會被截斷。

來源

2017-04-24 10:25:26 Jaro

這將是更好，如果有一種方法，使元素轉到工具欄標題的下一行，它是在更方便一個移動設備... – Simo03

SAPUI5 - Responsive sap.m.Table

回答

相關問題