Gantt task delete action button is not clickable if progress at 100% when bootstrap 4 theme is used

[Dan]

We are using Gantt in our project, the added tasks are using a template and we noticed that when the task progress covers the delete task button and it is not clickable anymore.

The template is similar to the one below:

<script id="task-template" type="text/x-kendo-template">
    <div class="template">
        <div class="wrapper">
            <strong class="title">#= title # </strong>
            <span class="resource">no resource assigned</span>
        </div>
        <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div>
    </div>
</script>

 

 

I have tried to reproduce this issue in the Kendo Dojo and noticed that it is reproducible only when bootstrap 4 is used (for bootstrap 3 works fine). Here is the link to the kendo dojo where I was able to reproduce this issue: https://dojo.telerik.com/eyutamel 

Please help me get the functionality for the delete (k-task-delete) on the task.

Thank you in advance!

[Aleksandar]

Hello Dan,

Thank you for sending a sample dojo with the issue isolated. I noticed the dojo follows the example on Gantt Task Templates, with one styling difference:

.progress{
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0%;
   height: 4px;
   background: rgba(0, 0, 0, .3);
 }

In the dojo provided the height is set to 100% thus the progress element covers the close icon when the task is 100% completed. You could either set a height for .progress class so that it is lower than the close icon or adjust the z-index of the close icon:

.k-link.k-task-delete{
      z-index:1;
    }

Here is a dojo that demonstrates the above approach.

Let me know if you have further questions.

Regards,
Aleksandar
Progress Telerik