TeamDesk Knowledge Base & Support

cooper collier  7/25/2017 9:39:27 PM

Would something like this work.

I am sorry about the poor quality and background noise. I slammed this together in 15 min before bed.

https://drive.google.com/file/d/0B6r_Jkhm9-xXN0JvcDBLalhhcnc/view?usp=sharing

basenine 7/25/2017 10:30:44 PM

Yes that would be of tremendous benefit. I was looking more at when the mouse hovered over the timeline block though - i.e. the cyan blue.

Possible?

cooper collier  7/26/2017 9:29:35 AM

No, I cannot make a tooltip on the bar itself. The bar is generated on the back-end there is no access to it. Anyone reading this can promote the idea and teamdesk will make the decision on developing it.

I was recently working on my own project scheduler, I ran into the same limitations with the timeline view. I came up with a few things that made the timeline work better for me.

I do not have the time to make a screencast video right now. If enough folks ask for it, I will move it up on my schedule and make a screen cast on how to do this.

For now I will just type up some suggestions.
I will make it in multiple posts hopefully making it easier to read.

cooper collier  7/26/2017 9:42:01 AM

FIX THE BARS RUNNING OFF THE SCREEN.

I had tasks that had no end or start date, they were just in the project and I wanted them to show.

The solution:
Create the following columns
Task Type - Text : drop down : options Floating, Standard, No End..
Project-Calendar Due Date Formula - Date If([Task Type]="Floating",Today(),[Due Date])
Project-Calendar Start Date Formula - Date If([Task Type]="Floating",Today(),[Est. Start Date])

Set the Formula Start and Due columns in the timeline view. The formula sets the dates to today if the type is floating. This will make the task show on the timeline all the time it will not run off the edge.

You can use the same concept if you are tracking start and end dates. A person starts the task but has not finished, now the task runs off the right side of the screen. Use the formula to set the end date to something like today()+3d

cooper collier  7/26/2017 9:57:54 AM

FORCE THE TIMELINE VIEW TO DISPLAY THE TIME PERIOD

I wanted to have an overview of an entire project. The timeline view was limited because it would automatically not show enough detail.

The solution:
This is a bit complicated, so I can give you the general idea. If I make a screencast tutorial someday I can make it easier to understand.

I created a task, and made the task type (Project start-end) I then made that task always be the first item in the timeline. I also used that task to set a project start and end date. This makes the timeline view work better. It will look something like this.

https://drive.google.com/file/d/0B6r_Jkhm9-xXX2tiNU9Jd2RudzA/view?usp=sharing

This is a screenshot of the timeline view settings i used.

https://drive.google.com/open?id=0B6r_Jkhm9-xXM1Zoa1hYSnh5VVk

Kirill Bondar  Staff  7/26/2017 10:12:14 AM

To fix labels in Chrome (and probably Safari) you can add the following to dbstyles.css

/* fix timeline labels */
.fs-layouttimeline > table > thead > tr:first-child > th:first-child + th,
.fs-layouttimeline > table > tbody > tr > td:first-child + td
{
position: sticky;
left: 0;
z-index: 100;
}
.fs-layouttimeline > table > tbody > tr:not([style]):not(.fs-odd) {
background-color: #FFF;
}
.fs-layouttimeline > table > tbody > tr > td:first-child + td {
background-color: inherit;
}
/* end fix timeline labels */

cooper collier  7/26/2017 10:14:11 AM

I just notice that my above screenshots are improperly formatted.
I am sorry, I will am correcting them now..

cooper collier  7/26/2017 10:36:54 AM

THese are the fixed links.
This is what the timeline view looks like using the limits

https://drive.google.com/open?id=0B6r_Jkhm9-xXb1g4TS1jcmp5NTA

and these are the settings I used to do it.

https://drive.google.com/open?id=0B6r_Jkhm9-xXLVY1Q3hyMVhzVHc

cooper collier  7/26/2017 10:45:22 AM

USE XHTML TO ADD DETAIL TO EVENT COLUMN IN TIMELINE.

If you noticed in the screenshot above there is much more information in the first column of my timeline view. And it is formated. This was done using an XHTML column.

My project XHTML is crazy complicated, I even made it indent based on type of event. I am sorry but it would be impossible for me to explain how I did it here.

So I change the sample that was in the video to demonstrate how to do it.
It will look like this

https://drive.google.com/file/d/0B6r_Jkhm9-xXcU4zTGZ2VEhoY1k/view?usp=sharing

This is done by using an XHTML formula column.

This is the XHTML code I used.

<div style="font-size:11px;font-weight:bold">
<%=[event]%>
</div>
<div style="color:grey;font-size:9px">
<%=[date 1]%> to <%=[date 2]%>
</div>

cooper collier  7/26/2017 11:28:34 AM

USING A TOOLTIP TO DISPLAY MORE INFORMATION.

I developed this little "trick" soon after Teamdesk made the dbstyles.css available. It uses the dbsytle.css and xhtml together. Once you add the code to the style sheet, you can use this in any xhtml column so it's useful everywhere.

This is complicated and I cannot explain xhtml and css code here. If you get stuck please let me know you would like to see a tutorial. I will try and find time to create an xhtml tutorial.

First step is to make or edit a dbstyles.css file. If you do not already have a dbstyles.css file, simply create a text file, name it dbstyles.css and upload the file to the database resources.

Inside the dbstyles file put the following.

.tooltip {
position: relative;
display: inline-block;


}

.tooltip .tooltiptext {
white-space:nowrap;
visibility: hidden;
position: absolute;
z-index: 99999;


}

.tooltip:hover .tooltiptext {
visibility: visible;
}

REMEMBER - You have to reupload the file after you make changes to it.

Next create a formula xhtml column. use this code. "of course insert your columns"

<div class="tooltip" style="font-size:12px; ">

<%=[event]%>

<div class="tooltiptext" style="font-style:bold;font-size:14px;text-align:center;border-radius:10px;background-color:navy;border: 2px solid black;color:white;padding-top:5px;">

File Details
<div style="padding:20px; color:black; background:snow;min-height:50px;text-align:left;border-radius:10px;">

Start: <%=[date 1]%><br/>
Stop: <%=[date 2]%>
<br/><br/>
Event: <%=[event]%>
<br/><br/>
Details:<br/>
<%=[Details]%>

</div>

</div>
</div>


THis will make a tooltip that displays directly under the visible text.

THERE IS A SHORTCOMING... with pure css I cannot keep the tooltip from displaying off the edge of the screen. So if the column is on the right edge of the screen, the right side of the tooltip may be too far right and not visible.

I have been handling this situation by simply adjusting the CSS based on where I intend to display the xhtml column. To do this you need to add the following code to the second DIV.

top: -50px; right: 100%

Like this.
<div class="tooltiptext" style="font-style:bold;font-size:14px;text-align:center;border-radius:10px;background-color:navy;border: 2px solid black;color:white;padding-top:5px; top: -50px; right: 100%;">

Use trial and error to adjust the top and right so it displays as you need it.

Anyone can directly contact me to encourage me to make a tutorial for xhtml that should help with this or if you're stuck and need my consulting services. I am on the experts page.

https://www.teamdesk.net/experts?id=21

basenine 8/1/2017 5:56:26 PM

Thanks for all this Cooper and Kirill. Sorry for the tardy reply - been up to my neck.

I'll try out some of these over the next few days and let you know the results

Best regards

Brett

Luison Lassala 4/23/2020 8:39:49 AM

Does this solution from 2017 fix it??? I don't even know how to edit the dbstyles.css file. Any help here much appreciated.

Kirill Bondar Staff 7/26/2017 10:12:14 AM
To fix labels in Chrome (and probably Safari) you can add the following to dbstyles.css

/* fix timeline labels */
.fs-layouttimeline > table > thead > tr:first-child > th:first-child + th,
.fs-layouttimeline > table > tbody > tr > td:first-child + td
{
position: sticky;
left: 0;
z-index: 100;
}
.fs-layouttimeline > table > tbody > tr:not([style]):not(.fs-odd) {
background-color: #FFF;
}
.fs-layouttimeline > table > tbody > tr > td:first-child + td {
background-color: inherit;
}
/* end fix timeline labels */

Luison Lassala 3/12/2022 10:19:43 AM

Is the code for the dbstyles.css provided by Kirill in 2017 meant to prevent the labels of the Timeline from moving towards the left away from the screen as you scroll rightwards into the future??
It's a badly needed requirement but that code does not seem to do anything when I added it to the dbstyles.css.