Timeline view

Scheduler Javascript
#1

I have implemented a tab with the timelineview, but it is not rendering correctly (see attached screenshot). Based on the sample files, I have included the code snippets below, in addition to the timeline.js and ext.css files. I am not sure how to fix this issue…

.one_line { 
	white-space:nowrap;
	overflow:hidden;
	padding-top:5px; padding-left:5px;
	text-align:left !important;
}

scheduler.locale.labels.timeline_tab = "Instruments" //Title for instrument timeline tab

scheduler.createTimelineView({
            name: "timeline",
            x_unit: "hour",
            x_date: "%H:%i",
            x_step:	1,
            x_size: 24,
            x_start: 0,
            x_length: 24,
            y_unit: sections,
            y_property:	"instrument_id",
            dy: 70,
            section_autoheight: false,
            render:"bar"
});

        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
	<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
	<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
	<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>

timeline_screenshot.tiff1437×576 109 KB

#2

The reason of the problem is the next line

padding-top:5px; padding-left:5px;

custom padding settings breaks correct sizing.
What was the reason of padding usage? You can control height of the section by using dy parameter in timeline’s config.

#3

I wasn’t clear on what this piece of css was for:

.one_line { 
	white-space:nowrap;
	overflow:hidden;
	padding-top:5px; padding-left:5px;
	text-align:left !important;
}

Even after taking it out, it does not resolve the issue with the layout of my timeline…

#4

Hello,

  1. Do you experience the same problem with the included samples?
  2. Do you include any other CSS files on your page? If so then most likely there is some kind of conflict.

Can you please make a sample with all necessary files included there we could reproduce this issue or make it accessible online?

Best regards,
Ilya

#5

There was a css conflict…I had a css file being included called main.css. When I commented all the styles out, it did not fix the problem. After renaming the file, it magically fixed the problem. I’m not sure why the name main would cause that…