@syncfusion/ej2-filemanager 24.2.7 → 25.1.37

package/src/file-manager/layout/large-icons-view.d.ts

@@ -37,6 +37,7 @@ export declare class LargeIconsView {
      */
     constructor(parent?: IFileManager);
     private render;
+    private comparer;
     private preventImgDrag;
     private createDragObj;
     dragHelper(args: {

package/src/file-manager/layout/large-icons-view.js

@@ -2,7 +2,7 @@ import { ListBase } from '@syncfusion/ej2-lists';
 import { createElement, select, selectAll, EventHandler, KeyboardEvents, closest, Draggable } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, addClass, removeClass, Touch, isVisible } from '@syncfusion/ej2-base';
 import { getValue, setValue, remove } from '@syncfusion/ej2-base';
-import { DataManager, Query } from '@syncfusion/ej2-data';
+import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';
 import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import * as events from '../base/constant';
 import * as CLS from '../base/classes';
@@ -112,7 +112,12 @@ var LargeIconsView = /** @class */ (function () {
             };
             this.items = [];
             this.items = this.renderList(args);
-            this.items = this.allItems = getSortedData(this.parent, this.items);
+            if (this.parent.sortComparer && this.parent.sortBy !== 'None') {
+                this.items = this.allItems = DataUtil.sort(this.items, this.parent.sortBy, this.comparer.bind(this));
+            }
+            else {
+                this.items = this.allItems = getSortedData(this.parent, this.items);
+            }
             iconsView.classList.remove(CLS.DISPLAY_NONE);
             if (this.parent.enableVirtualization && this.allItems.length > 0) {
                 if (!this.element.style.height) {
@@ -172,6 +177,15 @@ var LargeIconsView = /** @class */ (function () {
             }
         }
     };
+    LargeIconsView.prototype.comparer = function (x, y, xObj, yObj) {
+        if (this.parent.sortOrder === 'Descending') {
+            var z = x;
+            x = y;
+            y = z;
+        }
+        return this.parent.sortComparer(x, y);
+    };
+    ;
     LargeIconsView.prototype.preventImgDrag = function () {
         var i = 0;
         while (i < this.itemList.length) {

package/src/file-manager/layout/navigation-pane.js

@@ -263,7 +263,6 @@ var NavigationPane = /** @class */ (function () {
         this.parent.selectedItems = [];
         this.parent.itemData = nodeData;
         var previousPath = this.parent.path;
-        var sNode = select('[data-uid="' + this.treeObj.selectedNodes[0] + '"]', this.treeObj.element);
         if (!this.isRightClick && this.isSameNodeClicked) {
             updatePath(args.node, this.parent.itemData[0], this.parent);
         }

package/src/file-manager/models/column-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
+import { Property, ChildProperty, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';import { SortComparer } from '../base/interface';
 import {TextAlign} from "./column";
 
 /**
@@ -86,6 +86,16 @@ export interface ColumnModel {
      */
     template?: string | Function;
 
+    /**
+     * Defines the custom sort comparer function.
+     * The sort comparer function has the same functionality like
+     * [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer.
+     * 
+     * @default null
+     * @aspType string
+     */
+    sortComparer?: SortComparer | string;
+
     /**
      * Defines the column template as string or HTML element ID which is used to add customized element in the column header.
      *

package/src/file-manager/models/column.d.ts

@@ -1,4 +1,5 @@
 import { ChildProperty, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
+import { SortComparer } from '../base/interface';
 /**
  * Defines alignments of text, they are
  * * Left
@@ -113,6 +114,15 @@ export declare class Column extends ChildProperty<Column> {
      * @aspType string
      */
     template: string | Function;
+    /**
+     * Defines the custom sort comparer function.
+     * The sort comparer function has the same functionality like
+     * [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer.
+     *
+     * @default null
+     * @aspType string
+     */
+    sortComparer: SortComparer | string;
     /**
      * Defines the column template as string or HTML element ID which is used to add customized element in the column header.
      *

package/src/file-manager/models/column.js

@@ -57,6 +57,9 @@ var Column = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], Column.prototype, "template", void 0);
+    __decorate([
+        Property(null)
+    ], Column.prototype, "sortComparer", void 0);
     __decorate([
         Property(null)
     ], Column.prototype, "headerTemplate", void 0);

package/src/file-manager/models/details-view-settings.js

@@ -24,9 +24,7 @@ import { Property, ChildProperty, initializeCSPTemplate } from '@syncfusion/ej2-
 export var columnArray = [
     {
         field: 'name', headerText: 'Name', minWidth: 120, isPrimaryKey: true,
-        template: initializeCSPTemplate(function (data) {
-            return "<span class=\"e-fe-text\">" + data.name + "</span>";
-        }),
+        template: '<span class=\"e-fe-text\">${name}</span>',
         customAttributes: { class: 'e-fe-grid-name' }
     },
     {

package/styles/bootstrap-dark.css

@@ -356,7 +356,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 2px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -670,7 +669,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/bootstrap.css

@@ -357,7 +357,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 2px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -670,7 +669,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/bootstrap4.css

@@ -356,7 +356,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 2px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -670,7 +669,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/bootstrap5-dark.css

@@ -373,7 +373,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 8px 16px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -681,7 +680,7 @@ ejs-filemanager {
   line-height: 18px;
   margin: -10px 0 0 -10px;
   width: 20px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/bootstrap5.css

@@ -373,7 +373,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 8px 16px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -681,7 +680,7 @@ ejs-filemanager {
   line-height: 18px;
   margin: -10px 0 0 -10px;
   width: 20px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/fabric-dark.css

@@ -352,7 +352,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 6px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -441,7 +440,7 @@ ejs-filemanager {
 .e-filemanager .e-grid .e-content .e-rowcell {
   border: 0;
   font-size: 12px;
-  padding: 10px 8px;
+  padding: 8px 12px;
   line-height: 16px;
 }
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
@@ -668,7 +667,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/fabric.css

@@ -353,7 +353,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 2px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -442,7 +441,7 @@ ejs-filemanager {
 .e-filemanager .e-grid .e-content .e-rowcell {
   border: 0;
   font-size: 12px;
-  padding: 10px 8px;
+  padding: 8px 12px;
   line-height: 16px;
 }
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
@@ -669,7 +668,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/file-manager/_bds-definition.scss

@@ -0,0 +1,234 @@
+/*! FileManager's bds theme wise override definitions and variables */
+$fm-skin-name: $skin-name !default;
+$fe-bc-font-size: $text-xs !default;
+$fe-bc-icon-font-size: $text-xl !default;
+$fe-dg-td-font-size: $text-sm !default;
+$fe-lg-text-font-size: $text-xs !default;
+$fe-ddl-icon-font-size: $text-sm !default;
+
+$fe-big-bc-font-size: $text-sm !default;
+$fe-big-bc-icon-font-size: $text-xl !default;
+$fe-big-lg-text-font-size: $text-sm !default;
+$fe-big-dg-header-font-size: 21px !default;
+$fe-big-dg-td-font-size: $text-base !default;
+
+$fe-border-color: $border-light !default;
+$fe-background: transparent;
+$fe-icon-color: $icon-color-disabled !default;
+$fe-label-color: $content-text-color-alt2 !default;
+$fe-text-color: $content-text-color !default;
+$fe-active-border-color: $content-bg-color-selected !default;
+$fe-active-bg-color: $content-bg-color-selected !default;
+$fe-active-font-color: $content-text-color !default;
+$fe-hover-border-color: $content-bg-color-hover !default;
+$fe-hover-bg-color: $content-bg-color-hover !default;
+$fe-ah-border-color: $content-bg-color-selected !default;
+$fe-ah-bg-color: $content-bg-color-selected !default;
+$fe-focus-border-color: $border-focus !default;
+$fe-bc-color: $content-text-color !default;
+$fe-bc-link-color: $content-text-color-alt2 !default;
+$fe-bc-hover-bg-color: $content-bg-color-alt2 !default;
+$fe-bc-hover-font-color: $content-text-color !default;
+$fe-grid-header-bg-color: $content-bg-color-alt1 !default;
+$fe-ddl-icon-color: $icon-color !default;
+$fe-error-color: $danger !default;
+$fe-img-border-color: $border-light !default;
+$fe-search-bg-color: $content-bg-color !default;
+$fe-tb-hover-border-color: $content-bg-color-alt3 !default;
+$fe-tb-focus-border-color: $fe-tb-hover-border-color !default;
+$fe-tb-focus-bg: $content-bg-color-alt3 !default;
+$fe-checkbox-color: $primary-text-color !default;
+$fe-checkbox-bg-color: $primary !default;
+$fe-drop-border-color: $primary !default;
+$fe-up-list-border-color: $border-light !default;
+$fe-clone-bg-color: $content-bg-color-alt3 !default;
+$fe-clone-border-color: none !default;
+$fe-clone-count-border-color: $primary-text-color !default;
+$fe-clone-count-font-color: $primary-text-color !default;
+$fe-clone-count-bg-color: $primary !default;
+$fe-drop-folder-bg-color: $primary !default;
+
+$fe-clone-box-shadow: $shadow !default;
+$fe-clone-border: none !default;
+$fe-tb-ddb-icon-padding: 0 !default;
+$fe-tb-ddb-height: calc(100% - 10px) !default;
+$fe-tb-ddb-btn-hvr-padding: 0 !default;
+$fe-tb-ddb-btn-padding: 0 !default;
+$fe-tb-ddb-border: 0 !default;
+$fe-tb-ddb-caret-size: 18px !default;
+$fe-upload-overlay-border: 2px !default;
+$fe-search-padding: 2.5px 12px 2px 0 !default;
+$fe-search-height: 29px !default;
+$fe-search-icon-margin: 5px !default;
+$fe-search-icon-font-size : 14px !default;
+$fe-search-clear-icon-padding: 0 !default;
+$fe-search-input-margin: 0 0 0 29px !default;
+$fe-bc-margin: 0 !default;
+$fe-bc-padding: 8px 12px 8px 18px !default;
+$fe-rtl-bc-padding: 8px 18px 8px 12px !default;
+$fe-bc-text-padding: 4px 4px 5px !default;
+$fe-bc-text-size: 18px !default;
+$fe-bc-icon-margin: 0 8px !default;
+$fe-bc-search-border-bottom: 1px !default;
+$fe-bc-submenu-height: 26px !default;
+$fe-bc-li-text-decoration: none;
+$fe-grid-icon-size: 20px !default;
+$fe-grid-icon-margin: 0 !default;
+$fe-dg-td-padding: 4px 24px 4px 0 !default;
+$fe-dg-rtl-td-padding: 8px 0 8px 24px !default;
+$fe-grid-header-height: 32px !default;
+$fe-grid-header-font-size: $text-xxs !default;
+$fe-grid-header-cb-padding-left: 12px !default;
+$fe-grid-content-font-size: $text-xs !default;
+$fe-grid-content-name-font-size: $text-sm !default;
+$fe-grid-icon-sort-margin: 0 !default;
+$fe-lg-margin: 0 !default;
+$fe-lg-padding: 0 4px !default;
+$fe-lg-item-height: 85px !default;
+$fe-lg-item-width: 80px !default;
+$fe-lg-item-margin: 8px 4px !default;
+$fe-lg-item-padding: 2px !default;
+$fe-lg-item-border: 1px !default;
+$fe-lg-item-inner-height: 79px !default;
+$fe-lg-item-inner-width: 74px !default;
+$fe-lg-icon-height: 40px !default;
+$fe-lg-icon-width: 40px !default;
+$fe-lg-icon-margin: 10px auto !default;
+$fe-lg-img-height: 62px !default;
+$fe-lg-text-padding: 2px 0 0 0 !default;
+$fe-cm-separator-margin: 0 0 !default;
+$fe-cb-line-height: 12px !default;
+$fe-dd-popup-blank-icon-padding-left: 40px !default;
+$fe-tv-fullrow-height: 34px !default;
+$fe-address-height: 35px !default;
+$fe-tv-node-height: 32px !default;
+
+$fe-big-tv-fullrow-height: 40px !default;
+$fe-big-address-height: 40px !default;
+$fe-big-tv-node-height: 38px !default;
+$fe-big-tb-ddb-btn-hvr-padding: 0 6px !default;
+$fe-big-tb-ddb-btn-padding: 0 6px !default;
+$fe-big-search-padding: 1.5px 10px 0 16px !default;
+$fe-big-search-height: 36px !default;
+$fe-big-bc-padding: 6px 12px !default;
+$fe-big-bc-text-size: 28px !default;
+$fe-big-bc-text-padding: 5px 4px !default;
+$fe-big-bc-li-item-height: 28px !default;
+$fe-big-bc-submenu-height: 27px !default;
+$fe-big-grid-icon-margin: 0 12px 0 0 !default;
+$fe-big-grid-header-height: 36px !default;
+$fe-big-dg-td-padding: 8px 30px 8px 0 !default;
+$fe-big-lg-padding: 0 6px !default;
+$fe-big-lg-item-height: 106px !default;
+$fe-big-lg-item-width: 100px !default;
+$fe-big-lg-item-margin: 12px 6px !default;
+$fe-big-lg-item-inner-height: 100px !default;
+$fe-big-lg-item-inner-width: 94px !default;
+$fe-big-lg-icon-height: 52px !default;
+$fe-big-lg-icon-width: 52px !default;
+$fe-big-lg-icon-margin: 11px auto !default;
+$fe-big-lg-img-height: 79px !default;
+$fe-big-lg-text-padding: 4px 2px 2px !default;
+$fe-big-grid-header-font-size: $text-sm !default;
+$fe-big-grid-content-font-size: $text-sm !default;
+$fe-big-grid-content-name-font-size: $text-base !default;
+$fe-big-cb-line-height: 14px !default;
+
+$fe-rtl-grid-icon-margin: 0 0 0 8px !default;
+
+$fe-mobile-lg-item-height: 155px !default;
+$fe-mobile-lg-item-width: 155px !default;
+$fe-mobile-lg-item-margin: 8px 8px !default;
+$fe-mobile-lg-item-inner-width: 110px !default;
+$fe-mobile-lg-icon-height: 110px !default;
+$fe-mobile-lg-icon-width: 110px !default;
+$fe-mobile-lg-icon-margin: 11px auto 0 !default;
+$fe-mobile-lg-img-height: 110px !default;
+$fe-mobile-grid-icon-size: 35px !default;
+$fe-mobile-icon-font-size: $text-xl !default;
+$fe-mobile-newfolder-padding-top: 0 !default;
+$fe-mobile-upload-padding-left: 0 !default;
+$fe-mobile-sort-padding-top: 3px !default;
+$fe-mobile-refresh-padding-top: 3px !default;
+$fe-mobile-select-padding-top: 2px !default;
+$fe-mobile-large-padding: 0 0 0 2px !default;
+$fe-mobile-grid-padding: 4px 2px 0 2px !default;
+$fe-mobile-details-padding-top: 3px !default;
+$fe-mobile-delete-padding-left: 4px !default;
+$fe-mobile-rename-padding-left: 2px !default;
+$fe-mobile-rename-padding-top: 3px !default;
+$fe-mobile-download-padding-left: 4px !default;
+$fe-mobile-cut-padding-left: 2px !default;
+$fe-mobile-cut-padding-top: 1px !default;
+$fe-mobile-copy-padding-left: 4px !default;
+$fe-mobile-search-height: 40px !default;
+$fe-mobile-lg-item-minwidth: 140px !default;
+$fe-mobile-lg-item-width-two: calc(50% - 17px) !default;
+$fe-mobile-lg-item-width-three: calc(33.33% - 17px) !default;
+
+$fe-big-lg-icon-empty-min-width: 300px !default;
+
+$fe-big-lg-icon-empty-content-font-size: 22px !default;
+$fe-big-lg-icon-empty-content-margin: 0 auto !default;
+$fe-big-lg-icon-empty-content-padding: 12px !default;
+$fe-big-lg-icon-empty-content-text-align: center !default;
+
+$fe-big-lg-icon-empty-icon-height: 92px !default;
+$fe-big-lg-icon-empty-icon-margin: 0 auto !default;
+$fe-big-lg-icon-empty-icon-width: 92px !default;
+
+$fe-big-lg-icon-empty-inner-content-font-size: $text-sm !default;
+$fe-big-lg-icon-empty-inner-content-margin: 0 auto !default;
+$fe-big-lg-icon-empty-inner-content-opacity: .5 !default;
+$fe-big-lg-icon-empty-inner-content-padding: 4px !default;
+$fe-big-lg-icon-empty-inner-content-text-align: center !default;
+
+$fe-big-grid-empty-min-width: 300px !default;
+
+$fe-big-grid-empty-content-font-size: 22px !default;
+$fe-big-grid-empty-content-margin: 0 auto !default;
+$fe-big-grid-empty-content-padding: 12px !default;
+$fe-big-grid-empty-content-text-align: center !default;
+
+$fe-big-grid-empty-icon-height: 92px !default;
+$fe-big-grid-empty-icon-margin: 0 auto !default;
+$fe-big-grid-empty-icon-width: 92px !default;
+
+$fe-big-grid-empty-inner-content-font-size: $text-sm !default;
+$fe-big-grid-empty-inner-content-margin: 0 auto !default;
+$fe-big-grid-empty-inner-content-opacity: .5 !default;
+$fe-big-grid-empty-inner-content-padding: 6px !default;
+$fe-big-grid-empty-inner-content-text-align: center !default;
+
+$fe-grid-empty-min-width: 200px !default;
+
+$fe-grid-empty-content-font-size: $text-base !default;
+$fe-grid-empty-content-margin: 0 auto !default;
+$fe-grid-empty-content-padding: 18px 0 8px 0 !default;
+$fe-grid-empty-content-text-align: center !default;
+
+$fe-grid-empty-icon-height: 82px !default;
+$fe-grid-empty-icon-margin: 0 auto !default;
+$fe-grid-empty-icon-width: 82px !default;
+
+$fe-grid-empty-inner-content-font-size: $text-sm !default;
+$fe-grid-empty-inner-content-margin: 0 auto !default;
+$fe-grid-empty-inner-content-opacity: .5 !default;
+$fe-grid-empty-inner-content-padding: 0 !default;
+$fe-grid-empty-inner-content-text-align: center !default;
+
+$fe-lg-icon-empty-min-width: 200px !default;
+
+$fe-lg-icon-empty-content-font-size: $text-base !default;
+$fe-lg-icon-empty-content-margin: 0 auto !default;
+$fe-lg-icon-empty-content-padding: 18px 0 8px 0 !default;
+$fe-lg-icon-empty-content-text-align: center !default;
+
+$fe-lg-icon-empty-icon-height: 82px !default;
+$fe-lg-icon-empty-icon-margin: 0 auto !default;
+$fe-lg-icon-empty-icon-width: 82px !default;
+
+$fe-lg-icon-empty-inner-content-font-size: $text-sm !default;
+$fe-lg-icon-empty-inner-content-margin: 0 auto !default;
+$fe-lg-icon-empty-inner-content-padding: 0 !default;
+$fe-lg-icon-empty-inner-content-text-align: center !default;

package/styles/file-manager/_layout.scss

@@ -318,7 +318,6 @@
         list-style: none;
         margin: $fe-bc-margin;
         padding: $fe-bc-padding;
-        visibility: visible;
 
         .e-breadcrumb-menu {
           display: inline;
@@ -475,7 +474,7 @@
           }
 
           @if $fm-skin-name == 'fabric' or $fm-skin-name == 'fabric-dark' {
-            padding: 10px 8px;
+            padding: 8px 12px;
             line-height: 16px;
           }
         }
@@ -882,7 +881,7 @@
           margin-left: -12px;
           width: 22px;
         }
-        position: absolute;
+        position: relative;
         text-align: center;
         top: 0;
       }

package/styles/file-manager/bootstrap-dark.css

@@ -356,7 +356,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 2px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -670,7 +669,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/file-manager/bootstrap.css

@@ -357,7 +357,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 2px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -670,7 +669,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/file-manager/bootstrap4.css

@@ -356,7 +356,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 2px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -670,7 +669,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/file-manager/bootstrap5-dark.css

@@ -373,7 +373,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 8px 16px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -681,7 +680,7 @@ ejs-filemanager {
   line-height: 18px;
   margin: -10px 0 0 -10px;
   width: 20px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/file-manager/bootstrap5.css

@@ -373,7 +373,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 8px 16px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -681,7 +680,7 @@ ejs-filemanager {
   line-height: 18px;
   margin: -10px 0 0 -10px;
   width: 20px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/file-manager/fabric-dark.css

@@ -352,7 +352,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 6px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -441,7 +440,7 @@ ejs-filemanager {
 .e-filemanager .e-grid .e-content .e-rowcell {
   border: 0;
   font-size: 12px;
-  padding: 10px 8px;
+  padding: 8px 12px;
   line-height: 16px;
 }
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
@@ -668,7 +667,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }

package/styles/file-manager/fabric.css

@@ -353,7 +353,6 @@ ejs-filemanager {
   list-style: none;
   margin: 0;
   padding: 2px 8px;
-  visibility: visible;
 }
 .e-filemanager .e-address .e-addressbar-ul .e-breadcrumb-menu {
   display: inline;
@@ -442,7 +441,7 @@ ejs-filemanager {
 .e-filemanager .e-grid .e-content .e-rowcell {
   border: 0;
   font-size: 12px;
-  padding: 10px 8px;
+  padding: 8px 12px;
   line-height: 16px;
 }
 .e-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
@@ -669,7 +668,7 @@ ejs-filemanager {
   line-height: 22px;
   margin-left: -12px;
   width: 22px;
-  position: absolute;
+  position: relative;
   text-align: center;
   top: 0;
 }