Always focus timelinesetter card on the screen

Question

I use TimelineSetter Plugin from GitHub Repo.

The problem is that when a TS-item is bigger than the half of the Timeline the plugin does not know where to put the activate card thus it is hidden because it is getting outside of the timeline. The good thing is that when you zoom and the size of the Card(TS-item) is less than half the size of the timeline everything works ok.

An example of the above problem is illustrated in this jsFiddle repository:

Example 1

I tried to fixed the problem and I made the size of the card the same size of the timeline and when the cards are moved I do not move the card but the arrow of the card. Unfortunately, This introduces other problems with the Zoom functionality.

Working demo: Problem with Zoom

Can someone point me to the right direction on how I can fix this?

Answer 1

I didnt look at the code to much, but it seems to me that the problem is that the card gets to much of a "left:" css property.

Try taking out the left: and just moving the yellow arrow that points to the timeline section.