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

2 posts, 0 answers
  1. Dan
    Dan avatar
    167 posts
    Member since:
    Nov 2017

    Posted 17 Mar Link to this post

    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!

  2. Aleksandar
    Admin
    Aleksandar avatar
    188 posts

    Posted 18 Mar Link to this post

    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

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top