@syncfusion/ej2-navigations 19.3.53 → 19.4.38

package/styles/treeview/_layout.scss

@@ -64,7 +64,7 @@
       }
     }
 
-    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
       .e-ul {
         padding: $treeview-big-root-ul-padding;
       }
@@ -117,6 +117,14 @@
 
       &.e-drag-item {
 
+        @if $skin-name == 'FluentUI' {
+          .e-icon-expandable,
+          .e-icon-collapsible {
+            padding-left: 24px;
+            padding-top: 10;
+          }
+        }
+
         .e-drop-count {
           padding: 3px 5px 4px;
         }
@@ -177,6 +185,40 @@
       height: $treeview-big-item-height;
     }
 
+    &.e-text-wrap {
+      .e-checkbox-wrapper {
+        & + .e-list-text {
+          max-width: $treeview-big-check-wrap-width;
+        }
+
+        & + .e-list-icon,
+        & + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-big-check-icon-wrap-width;
+          }
+        }
+
+        & +  .e-list-icon + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-big-check-icon-img-wrap-width;
+          }
+        }
+      }
+
+      .e-list-icon,
+      .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-big-icon-wrap-width;
+        }
+      }
+
+      .e-list-icon + .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-big-icon-img-wrap-width;
+        }
+      }
+    }
+
     .e-list-text {
       line-height: $treeview-big-text-height;
       @if $skin-name != 'bootstrap4' {
@@ -218,7 +260,7 @@
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
         }
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }
@@ -246,7 +288,7 @@
 
     &.e-drag-item {
 
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
 
         .e-text-content {
           padding-left:  $treeview-big-drag-item-text-padding-left;
@@ -255,17 +297,17 @@
         .e-icon-collapsible,
         .e-icon-expandable {
           font-size: $treeview-big-drag-icon-font-size;
-          @if ($skin-name != 'bootstrap5') {
+          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
             margin: $treeview-big-drag-icon-margin;
           }
         }
 
         .e-icon-collapsible::before,
         .e-icon-expandable::before {
-          @if ($skin-name != 'bootstrap5') {
+          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
             padding: $treeview-big-drag-before-icon-padding;
           }
-          @if ($skin-name == 'bootstrap5') {
+          @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             font-size: $treeview-big-drag-icon-font-size;
           }
         }
@@ -280,7 +322,7 @@
 
     &.e-rtl {
 
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
         .e-ul {
           padding: $treeview-big-rtl-root-ul-padding;
         }
@@ -303,7 +345,7 @@
 
       &.e-drag-item {
 
-        @if ($skin-name == 'bootstrap5') {
+        @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
 
           .e-text-content {
             padding-left: 0;
@@ -388,7 +430,52 @@
     &.e-text-wrap {
       .e-list-text {
         white-space: normal;
-        word-break: break-all;
+        word-break: break-word;
+      }
+
+      &.e-ie-wrap {
+        .e-list-text {
+          word-break: break-all;
+        }
+      }
+
+      .e-editing {
+        .e-list-text,
+        .e-list-text .e-input-group {
+          max-width: $treeview-edit-wrap-width;
+        }
+      }
+
+      .e-checkbox-wrapper {
+        & + .e-list-text {
+          max-width: $treeview-check-wrap-width;
+        }
+
+        & + .e-list-icon,
+        & + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-check-icon-wrap-width;
+          }
+        }
+
+        & +  .e-list-icon + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-check-icon-img-wrap-width;
+          }
+        }
+      }
+
+      .e-list-icon,
+      .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-icon-wrap-width;
+        }
+      }
+
+      .e-list-icon + .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-icon-img-wrap-width;
+        }
       }
     }
 
@@ -407,6 +494,12 @@
 
     .e-list-item {
 
+      &.e-active {
+        @if $skin-name == 'tailwind' {
+          font-weight: $treeview-active-font-weight;
+        }
+      }
+
       div.e-icons.interaction {
         -webkit-transition: -webkit-transform .3s ease-in-out;
         border-radius: 15px;
@@ -537,7 +630,7 @@
 
       .e-input-group {
         height: $treeview-input-height;
-        @if($skin-name == 'tailwind') {
+        @if($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
           margin-top: 3px;
         }
         @else if($skin-name == 'bootstrap5') {
@@ -596,8 +689,8 @@
     }
 
     .e-sibling {
-      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
-        width: 100%;
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+        width: 144px;
       }
       @else {
         @include sibling-style;
@@ -613,7 +706,7 @@
       @if ($skin-name == 'tailwind') {
         margin-top: -2px;
       }
-      @else if ($skin-name == 'bootstrap5') {
+      @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
         margin-top: 1px;
       }
       @else {
@@ -623,7 +716,7 @@
 
     .e-sibling::before {
       @include sibling-before(ltr);
-      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
         height: 2px;
         top: -1.5px;
       }
@@ -742,21 +835,24 @@
         float: left;
 
         .e-list-text {
-          @if ($skin-name == 'bootstrap5') {
+          @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             padding: 0 $treeview-drag-icon-padding;
           }
         }
       }
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' ) {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
         .e-icon-collapsible,
         .e-icon-expandable {
-          @if ($skin-name != 'bootstrap5') {
+          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
             margin:  $treeview-drag-icon-margin;
           }
 
-          @if ($skin-name == 'bootstrap5') {
+          @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             box-sizing: content-box;
             padding-left: $treeview-drag-icon-padding;
+            @if ($skin-name == 'FluentUI') {
+              padding-top: 8px;
+            }
           }
         }
       }
@@ -764,7 +860,7 @@
       .e-icon-collapsible::before,
       .e-icon-expandable::before {
         font-size: $treeview-drag-icon-font-size;
-        @if ($skin-name != 'bootstrap5') {
+        @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
           padding: $treeview-drag-icon-padding;
         }
         @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
@@ -785,7 +881,7 @@
         @else {
           line-height: normal;
           min-width: 12px;
-          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             padding: 1px 3px 2px;
           }
           @else {

package/styles/treeview/_material-dark-definition.scss

@@ -73,6 +73,13 @@ $treeview-check-image-margin: 0 0 0 12px !default;
 $treeview-rtl-check-image-margin: 0 12px 0 0 !default;
 $treeview-drop-count-border-size: 1px !default;
 $treeview-drop-count-font-size: 13px !default;
+$treeview-edit-wrap-width: calc(100% - 2px) !default;
+$treeview-check-wrap-width: calc(100% - 22px) !default;
+$treeview-check-icon-wrap-width: calc(100% - 59px) !default;
+$treeview-check-icon-img-wrap-width: calc(100% - 87px) !default;
+$treeview-icon-wrap-width: calc(100% - 29px) !default;
+$treeview-icon-img-wrap-width: calc(100% - 57px) !default;
+
 $treeview-big-item-height: 40px !default;
 $treeview-big-text-height: 38px !default;
 $treeview-big-input-height: 38px !default;
@@ -87,6 +94,12 @@ $treeview-big-check-margin: 0 0 0 10px !default;
 $treeview-big-rtl-check-margin: 0 10px 0 0 !default;
 $treeview-big-check-image-margin: 0 0 0 16px !default;
 $treeview-big-rtl-check-image-margin: 0 16px 0 0 !default;
+$treeview-big-check-wrap-width: calc(100% - 29px) !default;
+$treeview-big-check-icon-wrap-width: calc(100% - 70px) !default;
+$treeview-big-check-icon-img-wrap-width: calc(100% - 98px) !default;
+$treeview-big-icon-wrap-width: calc(100% - 34px) !default;
+$treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
+
 $treeview-drag-icon-padding: 6px !default;
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;

package/styles/treeview/_material-definition.scss

@@ -76,6 +76,12 @@ $treeview-check-image-margin: 0 0 0 12px !default;
 $treeview-rtl-check-image-margin: 0 12px 0 0 !default;
 $treeview-drop-count-border-size: 1px !default;
 $treeview-drop-count-font-size: 13px !default;
+$treeview-edit-wrap-width: calc(100% - 2px) !default;
+$treeview-check-wrap-width: calc(100% - 22px) !default;
+$treeview-check-icon-wrap-width: calc(100% - 59px) !default;
+$treeview-check-icon-img-wrap-width: calc(100% - 87px) !default;
+$treeview-icon-wrap-width: calc(100% - 29px) !default;
+$treeview-icon-img-wrap-width: calc(100% - 57px) !default;
 
 $treeview-big-item-height: 40px !default;
 $treeview-big-text-height: 38px !default;
@@ -91,6 +97,11 @@ $treeview-big-check-margin: 0 0 0 10px !default;
 $treeview-big-rtl-check-margin: 0 10px 0 0 !default;
 $treeview-big-check-image-margin: 0 0 0 16px !default;
 $treeview-big-rtl-check-image-margin: 0 16px 0 0 !default;
+$treeview-big-check-wrap-width: calc(100% - 29px) !default;
+$treeview-big-check-icon-wrap-width: calc(100% - 70px) !default;
+$treeview-big-check-icon-img-wrap-width: calc(100% - 98px) !default;
+$treeview-big-icon-wrap-width: calc(100% - 34px) !default;
+$treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 12px !default;

package/styles/treeview/_tailwind-definition.scss

@@ -41,6 +41,13 @@ $treeview-check-image-margin: 0 0 0 8px !default;
 $treeview-rtl-check-image-margin: 0 8px 0 0 !default;
 $treeview-drop-count-border-size: 1px !default;
 $treeview-drop-count-font-size: $text-xs !default;
+$treeview-active-font-weight: 500 !default;
+$treeview-edit-wrap-width: calc(100% - 2px) !default;
+$treeview-check-wrap-width: calc(100% - 23px) !default;
+$treeview-check-icon-wrap-width: calc(100% - 56px) !default;
+$treeview-check-icon-img-wrap-width: calc(100% - 84px) !default;
+$treeview-icon-wrap-width: calc(100% - 32px) !default;
+$treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 
 $treeview-big-item-height: 48px !default;
 $treeview-big-text-height: 46px !default;
@@ -70,6 +77,11 @@ $treeview-big-drag-item-text-padding-left: 12px !default;
 $treeview-big-drag-icon-margin:-6px 0px 5px -9px !default;
 $treeview-big-drag-before-icon-padding: 6px !default;
 $treeview-big-check-text-padding: 0 12px !default;
+$treeview-big-check-wrap-width: calc(100% - 29px) !default;
+$treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
+$treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
+$treeview-big-icon-wrap-width: calc(100% - 35px) !default;
+$treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
 
 $treeview-font-family: $font-family !default;
 $treeview-drag-icon-font-size: 20px !default;

package/styles/treeview/_theme.scss

@@ -143,13 +143,13 @@
           border-color: $treeview-item-active-check-border-color;
           color: $treeview-item-active-check-color;
         }
-        @else if $skin-name == 'bootstrap5' {
+        @else if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
           border-color: $content-text-color-selected;
         }
       }
 
       .e-stop {
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
           border-color: $content-text-color-selected;
         }
       }
@@ -225,7 +225,7 @@
       > .e-text-content,
       > .e-fullrow {
         color: $treeview-text-disable-color;
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
           .e-list-text {
             color: $treeview-text-disable-color;
           }
@@ -239,7 +239,7 @@
     }
 
     .e-sibling {
-      @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5') {
+      @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
         @include sibling-theme(left, right);
       }
       @else {
@@ -347,7 +347,7 @@
       &.e-rtl {
 
         .e-sibling {
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5') {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
             @include sibling-theme(right, left);
           }
           @else {

package/styles/treeview/bootstrap-dark.css

@@ -81,6 +81,35 @@
   height: 40px;
 }
 
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 27px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 68px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 96px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 34px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 62px);
+}
+
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   line-height: 38px;
@@ -200,9 +229,40 @@
 
 .e-treeview.e-text-wrap .e-list-text {
   white-space: normal;
+  word-break: break-word;
+}
+
+.e-treeview.e-text-wrap.e-ie-wrap .e-list-text {
   word-break: break-all;
 }
 
+.e-treeview.e-text-wrap .e-editing .e-list-text,
+.e-treeview.e-text-wrap .e-editing .e-list-text .e-input-group {
+  max-width: calc(100% - 2px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 24px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 61px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 89px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 29px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 57px);
+}
+
 .e-treeview .e-ul {
   margin: 0;
   padding: 0 0 0 24px;

package/styles/treeview/bootstrap.css

@@ -82,6 +82,35 @@
   height: 40px;
 }
 
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 27px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 68px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 96px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 34px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 62px);
+}
+
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   line-height: 38px;
@@ -201,9 +230,40 @@
 
 .e-treeview.e-text-wrap .e-list-text {
   white-space: normal;
+  word-break: break-word;
+}
+
+.e-treeview.e-text-wrap.e-ie-wrap .e-list-text {
   word-break: break-all;
 }
 
+.e-treeview.e-text-wrap .e-editing .e-list-text,
+.e-treeview.e-text-wrap .e-editing .e-list-text .e-input-group {
+  max-width: calc(100% - 2px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 24px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 61px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 89px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 29px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 57px);
+}
+
 .e-treeview .e-ul {
   margin: 0;
   padding: 0 0 0 24px;

package/styles/treeview/bootstrap4.css

@@ -93,6 +93,35 @@
   height: 40px;
 }
 
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 24px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 65px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 93px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 34px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 62px);
+}
+
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   line-height: 36px;
@@ -271,9 +300,40 @@
 
 .e-treeview.e-text-wrap .e-list-text {
   white-space: normal;
+  word-break: break-word;
+}
+
+.e-treeview.e-text-wrap.e-ie-wrap .e-list-text {
   word-break: break-all;
 }
 
+.e-treeview.e-text-wrap .e-editing .e-list-text,
+.e-treeview.e-text-wrap .e-editing .e-list-text .e-input-group {
+  max-width: calc(100% - 2px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 18px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 55px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 83px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 29px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 57px);
+}
+
 .e-treeview .e-ul {
   margin: 0;
   padding: 0 0 0 14px;