Row Spacing | OutSystems

Olivier Levine

Solved

Row Spacing

Question

Hi All,

For a TableRecords widget (Traditional Web) how does one vary the Row spacing/margin to allow for more spread-apart looking rows?

Thanks.

23 Apr 2020

Paulo Jadaugy

Solution

You have to force the style with !important.
Attached is an example.

Let me know if this is what you need.

Thanks.

See solution in context

SampleRowSpace.oml

24 Apr 2020

Paulo Jadaugy

Hi Oliver,

Usually you can achieve spacing between cells using the following css at your table.

Example CSS:
border-spacing: 2px 2px;

and you can use that in your table.

or for a specific row you can create an additional class that adds custom padding:

tr.ExtraSpace>td {
  padding-bottom: 1em;
}

Thanks.

23 Apr 2020

3 replies

Last reply 23 Apr 2020

Show thread

Hide thread

Olivier Levine

Paulo Jadaugy wrote:

Hi Oliver,

Usually you can achieve spacing between cells using the following css at your table.

Example CSS:
border-spacing: 2px 2px;

and you can use that in your table.

or for a specific row you can create an additional class that adds custom padding:

tr.ExtraSpace>td {
  padding-bottom: 1em;
}

Thanks.

That sounds useful - however - how would I apply the class ExtraSpace to the Row?

23 Apr 2020

Paulo Jadaugy

Olivier Levine wrote:

Paulo Jadaugy wrote:

Hi Oliver,

Usually you can achieve spacing between cells using the following css at your table.

Example CSS:
border-spacing: 2px 2px;

and you can use that in your table.

or for a specific row you can create an additional class that adds custom padding:

tr.ExtraSpace>td {
  padding-bottom: 1em;
}

Thanks.

That sounds useful - however - how would I apply the class ExtraSpace to the Row?

Hi Oliver,

You can do it like this:

You can also use conditions based on the current record.

23 Apr 2020

Olivier Levine

Paulo Jadaugy wrote:

Olivier Levine wrote:

Paulo Jadaugy wrote:

Hi Oliver,

Usually you can achieve spacing between cells using the following css at your table.

Example CSS:
border-spacing: 2px 2px;

and you can use that in your table.

or for a specific row you can create an additional class that adds custom padding:

tr.ExtraSpace>td {
  padding-bottom: 1em;
}

Thanks.

That sounds useful - however - how would I apply the class ExtraSpace to the Row?

Hi Oliver,

You can do it like this:

You can also use conditions based on the current record.

That didn't work.

23 Apr 2020

Dorine Boudry

MVP

Hi Olivier,

this is good introduction to styling, see around 10 min mark to options about applying styles to elements.

https://www.outsystems.com/learn/lesson/1756/themes-and-styling

Dorine

23 Apr 2020

Dorine Boudry

MVP

Hi Olivier,

I can't seem to get it working with td element, but what works is following

1° make css

.BiggerRow div {
  padding: 20px;
}

2° enclose table cell content in div

3° apply the class to the table

see attached oml

DemoTableRecordsCSS.oml

23 Apr 2020

1 reply

24 Apr 2020

Show thread

Hide thread

Olivier Levine

Dorine Boudry wrote:

Hi Olivier,

I can't seem to get it working with td element, but what works is following

1° make css

.BiggerRow div {
  padding: 20px;
}

2° enclose table cell content in div

3° apply the class to the table

see attached oml

I meant the spacing Between rows - sorry.

24 Apr 2020

Paulo Jadaugy

Solution

You have to force the style with !important.
Attached is an example.

Let me know if this is what you need.

Thanks.

SampleRowSpace.oml

24 Apr 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines