CODEWITHSUNDEEP
csssapui5
Andreas Faschang-Gschwendt
Andreas Faschang-Gschwendt

Reputation: 25

How to reduce the space around an sap.ui.table cell

I try to reduce the size of a cell in an sap.ui.table around the input field.

In the screenshot below you see marked in green what I want to reduce.

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

As you can see I managed to reduce the font size and for "debugging purpose" I changed the background to red.

My Style.css:

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

I tried a minus margin, but it only moves the content of the input field and not the input field itself to the left.

My view itself has the class sapUiSizeCompact, still I think there is too much space around and since I have a lot of columns it does not fit to the screen.

Maybe someone has had the same issue and wanted to make a larger table editable and found a solution to reduce unnecessary space. Maybe as a sidemark, it doesn't need to work on a non desktop screen, too. (I try to move from a webdynpro abap to this sapui5 app.)

I appreciate your tips and hope to learn. Maybe some jQuery is necessary to do it?

Here the Plunker it's a little rough and not tailored to the exact point, but it should bring across the point.

Upvotes: 2

Views: 1833

Answers (1)

Marc
Marc

Reputation: 6190

I am not sure the standard CSS classes will help you because the padding is generated on a very low level. sap.ui.table.Column doesn't have the property class or styleClass, so you cannot hook up there. sap.ui.table.Table is too high level. Applying a standard CSS class there will affect the table itself, not its columns and cells.

What you can try is giving your table a custom CSS class.

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

then you can remove the padding in your CSS file

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

I used myVeryCompactTable twice to increase specificity (so I don't need !important). You can ofc use other ways to increase the specificity.

Result looks like this

enter image description here

Upvotes: 1

Related Questions