SAPUI5 - 반응 sap.m.Table

Question

sap.m.table 헤더를 headerToolbar와 함께 생성했습니다.

헤더에 두 개의 SelectList를 ToolbarSpacer로 구분하여 넣습니다.

:

문제는 화면 크기가 작은 경우 headerToolbar의 요소가 큰 화면에서 ...

를 다음 행으로 돌아가서립니다 없다는 것입니다

내가 헤더 응 답되고 싶어 : 작은 화면에서

필자는 공간이 충분하지 않으면 요소가 다음 줄로 이동해야합니다.

.enableTableScrolling { 
    overflow-x: scroll; 
} 

해당 테이블이 절단되지 않습니다 후 :

<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> 

Answer 1

툴바 대신 오버플로 툴바를 사용하지 않는 이유는 무엇입니까? 당신이 그것을 좋아하고, 당신이 툴바 내부 인 flexbox를 넣을 수 있습니다 생각을 당신이 설명했다이 "팝업에서"행동을 원하고에 따라 방향 속성을 설정하지 않은 경우 공식 반응 도구 모음 https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.OverflowToolbarFooter/preview

인가 "장치"모델. 바인딩 사용하여 표현은 다음과 같이 될 것입니다 :

여기

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

더 : https://sapui5.hana.ondemand.com/#docs/guide/69a8e469fbde46e7b8916250080effbd.html

Answer 2

당신은 CSS에서 스크롤 수평 테이블을 활성화 할 수 있습니다 : 여기

는 코드입니다.