How to I configure the items' size for fileManager 'files' mode?

Webix JS
#1

I have a fileManager view that I’d like to adjust its items’ size (I’m customizing the iconTemplate to display a bigger area for the icons - with thumbnails).

this.ui = window.webix.ui({
      view: 'filemanager',
      id: 'files',
      mode:'files,
      modes: ['files'],
      iconTemplate: ...
});

How can I change its default row’s height and items’ size from 150 x 110 to other value?
If I just change the css for .webix_dataview_item, webix will still calculate the disposition and amount of elements per row for those dimensions, so there should be a way to configure its calculations

<div webix_l_id="/newFolder" class="webix_dataview_item webix_fmanager_files" role="option" tabindex="0" style="width:150px; height:110px; float:left; overflow:hidden;">
#2

Hey @Miguel, seems like it is actually possible to do with plain CSS. It is a bit convoluted, but you can change the row’s height by getting the following selector (essentially we are selecting all of the direct children inside of that container, which will be just the rows in the files mode, nothins else is affeected):

.webix_fmanager_files .webix_scroll_cont > * {
  height: x;
}

And you were right to try and modify the css for .webix_dataview_item, but without modifying the row, the elements will get misplaced.

The end result looks something like this: https://snippet.webix.com/e5briizd. You can try resizing the Files view and see that the icons get readjusted just fine. Please note the use of !important needed to overwrite the inline CSS styles.

#3

Hey @Dzmitry thanks for the quick reply :slight_smile:

The height I managed to override the way you suggest. But what about the width? If I change the width, then on resizing the window, some items disappear… as they will break within the row (set with overflow: hidden)

<style>
  .webix_dataview_item.webix_fmanager_files {
    height: 200px !important;
    width: 200px !important;
  }
  .webix_fmanager_files .webix_scroll_cont > * {
    height: 200px !important;
  }
  .webix_fmanager_files .webix_fmanager_icon {
 	margin: 0;
	font-size: 100px;
  }
</style>
#4

I am also struggling with this. Any ideas on how to tackle this @Dzmitry?

#5

Yes, actually, it is possible to change the icon size by assigning a new type to the dataview part of the file manager, which will allow you to change the size of the icon containers. The icons’ size should still be adjusted via CSS.

Here is an example: https://snippet.webix.com/5sppmkqz.

Please note that we are creating a new type based on the default FileView type, which is used in the files mode, and we are only adjusting the elements’ sizes. You will also need to assign the new type to the dataview part of the file manager (“files” mode) in the onViewInit event.

Also please disregard the previous solution, as it introduces some unwanted issues.

#6

Hi @Dzmitry thanks! Your solution worked perfectly.