Я создал таблицу sap.m.table с заголовком headerToolbar.

В заголовке я поместил заголовок и два SelectList, разделенных ToolbarSpacer.

Проблема в том, что когда размер экрана небольшой, элементы на headerToolbar не возвращаются на следующую строку и усекаются ...

На большом экране:

enter image description here

На маленьком экране:

enter image description here

Я хочу, чтобы заголовок был отзывчивым, то есть элементы должны переходить на следующую строку, если места недостаточно.

Вот код:

<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>
0
Simo03 24 Апр 2017 в 13:20

2 ответа

Лучший ответ

Почему вы не используете OverflowToolbar вместо Панели инструментов? Является ли официальная отзывчивая панель инструментов https: //sapui5.hana.ondemand .com / explored.html # / образец / sap.m.sample.OverflowToolbarFooter / просмотр

Если вам это не нравится и вы хотите описать описанное вами поведение «всплывающих окон», я думаю, вы можете поместить FlexBox на свою панель инструментов и установить свойство direction в зависимости от модели «устройства». Использование привязки выражения будет примерно таким:

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

Подробнее здесь: https://sapui5.hana.ondemand.com/#docs /guide/69a8e469fbde46e7b8916250080effbd.html

0
Rafael López Martínez 24 Апр 2017 в 13:24

Вы можете включить горизонтальную прокрутку таблицы в css:

.enableTableScrolling {
    overflow-x: scroll;
} 

После этого таблица не будет усечена.

0
Jaro 24 Апр 2017 в 10:25
43585540