fix(gantt): use box-sizing border box for task and milestones

telerik · Nov 29, 2021 · 874d0af · 874d0af
1 parent 74b0954
commit 874d0af
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/default/scss/gantt/_layout.scss b/packages/default/scss/gantt/_layout.scss
@@ -121,10 +121,11 @@
                 background: none;
 
                 .k-task-milestone-content {
-                    width: .875em;
-                    height: .875em;
+                    width: 100%;
+                    height: 100%;
                     border-width: 1px;
                     border-style: solid;
+                    box-sizing: border-box;
                     transform: rotate(45deg);
                 }
             }
@@ -455,6 +456,7 @@
         height: 1em;
         border-width: 1px;
         border-style: solid;
+        box-sizing: border-box;
         transform: rotate(45deg);
     }
 
@@ -507,6 +509,7 @@
         @include border-radius( $border-radius );
         border-width: $gantt-task-border-width;
         border-style: solid;
+        box-sizing: border-box;
         cursor: default;
 
         .k-resize-handle {

diff --git a/tests/visual/src/misc/gantt-react.html b/tests/visual/src/misc/gantt-react.html
@@ -203,8 +203,8 @@
                                     Market Research
                                 </td>
                                 <td>
-                                    <div class="k-task k-task-single" style="left: 83px; top: 8px; width: 8px;">
-                                        <div class="k-task-complete" style="width: 7px;"></div>
+                                    <div class="k-task k-task-single" style="left: 83px; top: 8px; width: 200px;">
+                                        <div class="k-task-complete" style="width: 50px;"></div>
                                         <div class="k-task-content">Market Research</div>
                                         <span class="k-task-actions">
                                             <a class="k-link k-task-delete">