cancel
Showing results for 
Search instead for 
Did you mean: 

Folder Tree List default width

j_ashton
Champ in-the-making
Champ in-the-making

Hi everyone,

We're having a question regarding the left side folder tree list default width.

As we have some very long nested folders with long names, users have to systematically change the width of the left panel to a larger size, is there a way to change the width permanently ?

Thanks in advance,

3 REPLIES 3

abhinavmishra14
World-Class Innovator
World-Class Innovator

You need to look into "share.js" file and override the pannel width to a fixed value. You can find this file here: share.war/js/share.js

Update the properties for width and put the file as part of your customization such as: <SHAREMODULE>\src\main\resources\META-INF\js\share.js 

The changes will automatically apply once you apply your customization to the war file. 

Approach 1:

onReady: function Resizer_onReady()
{

this.MIN_FILTER_PANEL_WIDTH = 200; //Keeps the pannel 200px fixed When page loads. Change the value accordingly 

this.MAX_FILTER_PANEL_WIDTH = 1500; //Allows you to move the pannel till the end up to 1500 px. Change the value accordingly 

// Horizontal Resizer
this.widgets.horizResize = new YAHOO.util.Resize(this.options.divLeft,
{
handles: ["r"],
minWidth: this.MIN_FILTER_PANEL_WIDTH,
maxWidth: this.MAX_FILTER_PANEL_WIDTH
});

// Before and End resize event handlers
this.widgets.horizResize.on("beforeResize", function(eventTarget)
{
this.onResize(eventTarget.width);
}, this, true);
this.widgets.horizResize.on("endResize", function(eventTarget)
{
this.onResize(eventTarget.width);
}, this, true);

// Recalculate the vertical size on a browser window resize event
YAHOO.util.Event.on(window, "resize", function(e)
{
this.onResize();
}, this, true);

// Monitor the document height for ajax updates
this.options.documentHeight = Dom.getXY("alf-ft")[1];

YAHOO.lang.later(1000, this, function()
{
var h = Dom.getXY("alf-ft")[1];
if (Math.abs(this.options.documentHeight - h) > 4)
{
this.options.documentHeight = h;
this.onResize();
}
}, null, true);

// Initial size
var width = (this.options.initialWidth ? this.options.initialWidth : this.DEFAULT_FILTER_PANEL_WIDTH);
if (YAHOO.env.ua.ie > 0)
{
this.widgets.horizResize.resize(null, this.widgets.horizResize.get("element").offsetHeight, width, 0, 0, true);
}
else
{
this.widgets.horizResize.resize(null, this.widgets.horizResize.get("height"), width, 0, 0, true);
}

this.onResize(width);
},

Approach 2: Override the values globally, make sure it doesn't break any other functionality. 

Alfresco.widget.Resizer.prototype =
{
/**
* Minimum Filter Panel height.
*
* @property MIN_FILTER_PANEL_HEIGHT
* @type int
*/
MIN_FILTER_PANEL_HEIGHT: 200,

/**
* Minimum Filter Panel width.
*
* @property MIN_FILTER_PANEL_WIDTH
* @type int
*/
MIN_FILTER_PANEL_WIDTH: 140,

/**
* Default Filter Panel width.
*
* @property DEFAULT_FILTER_PANEL_WIDTH
* @type int
*/
DEFAULT_FILTER_PANEL_WIDTH: 160,

/**
* Maximum Filter Panel width.
*
* @property MAX_FILTER_PANEL_WIDTH
* @type int
*/
MAX_FILTER_PANEL_WIDTH: 500,

......

~Abhinav
(ACSCE, AWS SAA, Azure Admin)

j_ashton
Champ in-the-making
Champ in-the-making

Thanks Abhinav i'll try that !

Let me know if it works.

~Abhinav
(ACSCE, AWS SAA, Azure Admin)