how to create a list records with no line separator in the reactive web app?

I am trying to create a kanban board using reactive web app and I didn't find the option to disable line separator.  It was easy guess that I could change the style class to "list" in the table widget but is not being easy to guess the line separator.

I could use columns structure but it didn't solve my problem. 

Someone could help me?

Thanks

Hi Luciano,

Did you use your browser's development tools (e.g. F12 in Chrome) to see where the line is coming from?

Hi Kilian, how are you ?

there is a tr for each line.  it seems I have to change the class, but how and which one? See below


You'd need to check what causes the line, whether it's the tr or the td. If it's the tr, you could override the "table-row" class, if it's the td you need to select for the right attribute ([data-header] in case of the header, I don't know what the others have).

looks like a CSS padding on the tr element or table-row class.

Hi Luciano,

You can remove the separator with this CSS:

.table-row td {
    border-bottom: none;
}

It seems we have some doubts here.  Below is what I have using the normal web using list. I just want to reproduce it using reactive web. 

Kilian,

    for me the structure using tr is the problem. The first tr in my first picture has backlog and the other ones have the next phase names. 

When I say line separator I am talking about the list property removing the line between the lines. See the detail in the picture below.  However, if someone have another idea, I will be glad to receive a suggestion.

 

Solution

I have the solution and I will leave the answer here to help someone that might have the same problem.

Don't use the table widget. Use the list widget and add a list item widget, add a field from any instance.

Now you need to customize the list-item css and the magic appears.

SyntaxEditor Code Snippet

.list-item {
    padding: 20px;
    float: left;
    border: 1px solid #d1d1d1;
    border-radius: 2px 2px 2px 2px;
    margin-right: 10px;
    width: 250px;
}
Solution

Hi Luciano,

Thanks for reporting back with the answer. I wasn't aware you used another Widget than the List Widget or I would've told you, so it's a good thing you use it now :).

Kilian Hekhuis wrote:

Hi Luciano,

Thanks for reporting back with the answer. I wasn't aware you used another Widget than the List Widget or I would've told you, so it's a good thing you use it now :).

Hi Kilian,

   if you see in my first post I wrote "table widget" and it seems people confused the separator line property from list widget with other thing.  These are the problems with a writing post, but it is ok.  Have a nice day and thank you for your support.


Yeah, I didn't read carefully enough, I didn't say it was your fault :). Have a nice day too! Happy coding :)