javascripttimelinedhtmlx-scheduler

DHTMLX Scheduler timeline view - labels with longer text don't appear in tree mode

I have a question to which I can't find the answer for some time.

It's about DHTMLX scheduler timeline view in tree mode. The problem is that labels with longer text than the available space for the folder elements of the tree(these which have children) disappear, they are not shown in the first column of the timeline view. I can't understand why is this happening. Is there some kind of a setting on the scheduler, which I'm missing. It is important to note that styling of the scheduler has to be with the dhtmlxscheduler_material.css file or in other words material design. Here is an image of the scheduler with the problem shown

I also provide a code sample which simulates the problem. https://docs.dhtmlx.com/scheduler/snippet/9445edbf

Solution

  • This behavior can be fixed by the following style:

        .dhx_scell_expand{
      position:absolute!important;
    }

    Also in material skin, it requires some additional styling to make it look better, which may look like this fragment:

        .dhx_scell_expand{
      position:absolute!important;
    }
    .dhx_scell_name{ 
      margin-left: 26px;
      text-align: left !important;         
    }

    Of cause, you can experiment with it to make appropriate for your project.

    Also, in a case with long section names, you can change the default width of the section names column through the "dx" parameter:

    
scheduler.createTimelineView({
...
    dx: 300, //200 by default
...
});

    Here is an example with additional styling, and the resized names section : http://snippet.dhtmlx.com/5/a3da39a40

    Also, you can separate the section name using the </br> tag, change the height of the section through the "folder_dy" property, and align multiline text through CSS(line-height/ margin), like in the following example: http://snippet.dhtmlx.com/5/87845739f