Как уменьшить пространство вокруг ячейки sap.ui.table - PullRequest
1 голос
/ 15 апреля 2020

Я пытаюсь уменьшить размер ячейки в sap.ui.table вокруг поля ввода.

На скриншоте ниже вы видите зеленым, что я хочу уменьшить.

Screenshot of sap.ui.table and marked in green what I want to reduce

Как видите, мне удалось уменьшить размер шрифта, и для "цели отладки" я изменил фон на красный.

Мой Style.css :

.test_maybe_he input {
   font-size: 0.75em !important;
   background-color: #ff0000 !important;
   padding-left: 0px !important;
   margin-left: 0px;
}

Я пробовал минусовое поле, но оно только перемещает содержимое поля ввода, а не само поле ввода влево.

Мое представление само имеет класс sapUiSizeCompact, тем не менее я думаю, что вокруг слишком много места, и поскольку у меня много столбцов, он не помещается на экран.

Возможно, у кого-то возникла такая же проблема, и он хотел сделать таблицу большего размера редактируемой и нашел решение уменьшить ненужное пространство. Может быть, в качестве дополнительного признака, он не должен работать и на неэкранном экране. (Я пытаюсь перейти от webdynpro abap к этому приложению sapui5.)

Я ценю ваши советы и надеюсь учиться. Может быть, для этого нужно какое-то количество jQuery?

Здесь Плункер немного грубоват и не приспособлен к точной точке, но это должно привести к точке.

1 Ответ

1 голос
/ 16 апреля 2020

Я не уверен, что стандартные классы CSS помогут вам, потому что заполнение генерируется на очень низком уровне. sap.ui.table.Column не имеет свойства class или styleClass, поэтому вы не можете подключиться там. sap.ui.table.Table слишком высокий уровень. Применение стандартного класса CSS повлияет на саму таблицу, а не на ее столбцы и ячейки.

Вы можете попробовать настроить таблицу CSS на свой класс.

<t:Table id="table0"
    ...
    class="myVeryCompactTable">

затем вы можете удалить отступ в вашем CSS файле

.myVeryCompactTable.myVeryCompactTable .sapUiTableCellInner {
    padding: 0;
}

Я дважды использовал myVeryCompactTable, чтобы увеличить специфичность (поэтому мне не нужно !important). Вы можете c использовать другие способы повышения специфичности.

Результат выглядит следующим образом

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...