border-top not working in table-cell?

border-top not working in table-cell?

  

Hello, 

For some reason border-top doesn't work for me if I try to set it to none in my extra styles. 

Border-bottom on the other hand works so I don't understand, is there any way so I can use border-top?

Hello Nick.

Can you describe the exact scenario where you're getting that problem?

If you have for instance a div with a border and you apply something like:


.yourClass {

    display: table-cell;   

    border: 2px solid red;

    border-top: none; }

it must work.

The only thing I can see is some class being overriding that property on an upper level of your CSS hierarchy.

Gonçalo Martins wrote:

Hello Nick.

Can you describe the exact scenario where you're getting that problem?

If you have for instance a div with a border and you apply something like:


.yourClass {

    display: table-cell;   

    border: 2px solid red;

    border-top: none; }

it must work.

The only thing I can see is some class being overriding that property on an upper level of your CSS hierarchy.


Hello Gonçalo,


First of all thank you for replying.


At the moment I have this table, everything seems fine here. You have an user with multiple records. Now if the second record has the same user i hide it. The problem is that if it's the same user I should also hide my top border.

This is how i defined my cell at this moment. But the False should be a true and the border-bottom should be border-top:. For some reason it doesn't wanna remove my top borders and maybe you can help me with that?


Hello Nick.

I suppose you're using the common table record styles, right?

I think that your problem is not in the current cell, but on the top cell where you might have some border-bottom applied that is overlapping your cell style.

The best way is to build and implement your own CSS classes to apply to the table record, to avoid those problems.


Gonçalo Martins wrote:

Hello Nick.

I suppose you're using the common table record styles, right?

I think that your problem is not in the current cell, but on the top cell where you might have some border-bottom applied that is overlapping your cell style.

The best way is to build and implement your own CSS classes to apply to the table record, to avoid those problems.


Hello Gonçalo,

How should I do this, i'm pretty new to outsystems and i don't really know how to attach a stylesheet to a specific table?


Thanks already.


Nick,

Outsystems is only the platform that generates the code, so table records will be rendered as simple Html tables to which you can add style.

The table record will give you properties to define 4 classes - Style Classes / Header Style / Odd Line Style and Even Line Style.

As you can see in the image if you're using the Dublin theme, you can see both classes TableRecords_OddLine and TableRecords_EvenLine with the property border-bottom: 1px solid #ddd, which looks to me that is causing the issue (not really an issue since it's like this by design) you reported:


This being said, you can easily customize those Classes or create new ones to perform the behavior you need.

As a simple and quick fix, create new classes based on the ones that are defined on the previous image a remove the property border-bottom: 1px solid #ddd, then you'll control in each cell the border you need since the table will not have borders now.

However this works, as a best practice try to avoid inline css and use classes instead. But as a quick fix, my suggestion will do the work.

Solution

Gonçalo Martins wrote:

Nick,

Outsystems is only the platform that generates the code, so table records will be rendered as simple Html tables to which you can add style.

The table record will give you properties to define 4 classes - Style Classes / Header Style / Odd Line Style and Even Line Style.

As you can see in the image if you're using the Dublin theme, you can see both classes TableRecords_OddLine and TableRecords_EvenLine with the property border-bottom: 1px solid #ddd, which looks to me that is causing the issue (not really an issue since it's like this by design) you reported:


This being said, you can easily customize those Classes or create new ones to perform the behavior you need.

As a simple and quick fix, create new classes based on the ones that are defined on the previous image a remove the property border-bottom: 1px solid #ddd, then you'll control in each cell the border you need since the table will not have borders now.

However this works, as a best practice try to avoid inline css and use classes instead. But as a quick fix, my suggestion will do the work.


Hello Gonçalo,


Thanks for all the help, I should be able to fix my issue.

Solution

Let me know if you have any further issues on it.

If so, you can send me an eSpace with it and I'll try to help you.