Timelineitem Mobile Issue - Vertical line is not appearing

I am developing an outsystems 10 mobile app, where I am trying to create a vertical timeline.

I have used timeline item inside list -> list item content. When the data is supplied to list, it is creating list of timeline item but the connecting line between icon is missing.

Do you know why? Could you help me to resolve the issue? I am attaching the picture of screen and widget mapping.

screen print is here

Hi Arunkumar,

From what I could check using OS 11 the issue is because the TimelineItems are not one after the other and encapsulated inside the ListItem.


Is it possible to do something like this?

Widget tree:


Result:


Otherwise you would need to customize the CSS.


Regards,
Paulo Jadaugy

Paulo Jadaugy wrote:

Hi Arunkumar,

From what I could check using OS 11 the issue is because the TimelineItems are not one after the other and encapsulated inside the ListItem.


Is it possible to do something like this?

Widget tree:


Result:


Otherwise you would need to customize the CSS.


Regards,
Paulo Jadaugy

Hey Paulo,

This works like a charm.

One additional issue. Now I have got a line in the last item which I don't want. Do you have anything to fix it?



Hey Arukumar,

Great to hear, I was trying to play around with the css but was unable to hide it using just CSS.

So alternative way could using the following approach:

If(DataAction1.DummyList.CurrentRowNumber = DataAction1.DummyList.Length -1 ,"HideLine","")

And added this additional css rule to hide it:

.HideLine .timeline-icon-line {
    display: none;
}

And the last line is now removed:

Solution

Arunkumar Balu wrote:

Paulo Jadaugy wrote:

Hi Arunkumar,

From what I could check using OS 11 the issue is because the TimelineItems are not one after the other and encapsulated inside the ListItem.


Is it possible to do something like this?

Widget tree:


Result:


Otherwise you would need to customize the CSS.


Regards,
Paulo Jadaugy

Hey Paulo,

This works like a charm.

One additional issue. Now I have got a line in the last item which I don't want. Do you have anything to fix it?



Hi Arunkumar,

You can ignore my previous answer.
Found an easier way (had some additional time today to check)

You can add the following CSS to remove the last line:

Snippet

[data-block*="TimelineItem"]:last-of-type .timeline-icon-line { 
    display: none; 
}
Solution

Paulo Jadaugy wrote:

Arunkumar Balu wrote:

Paulo Jadaugy wrote:

Hi Arunkumar,

From what I could check using OS 11 the issue is because the TimelineItems are not one after the other and encapsulated inside the ListItem.


Is it possible to do something like this?

Widget tree:


Result:


Otherwise you would need to customize the CSS.


Regards,
Paulo Jadaugy

Hey Paulo,

This works like a charm.

One additional issue. Now I have got a line in the last item which I don't want. Do you have anything to fix it?



Hi Arunkumar,

You can ignore my previous answer.
Found an easier way (had some additional time today to check)

You can add the following CSS to remove the last line:

Snippet

[data-block*="TimelineItem"]:last-of-type .timeline-icon-line { 
    display: none; 
}

This works Paulo. Thanks for all help!