(Auto-)Resize sidebar to max. length of menu item

Webix JS
1

Hi,

I’m just starting out with Webix, so please bear with me! :slight_smile:

I want to use a SideBar which loads it’s data (i.e. it’s menu items) from a JSON file. This I got working. I don’t want to use side scrolling though if the maximum string length exceeds the widht of the side bar, I want it automatically resized when data loading is completed.

I tried a number of things, e.g. “autowidth: true”, calling resize() or adjust(), but to no effect.

What is the correct / an efficient way to do that? If it can’t be done automatically, how do i determine the (pixel) length of the “value” of a menu item?

Thank you in advance!

2

Hi,

You can use webix.html.getTextSize helper:

view: "sidebar",
on:{
    onAfterLoad: function(){
	var maxWidth =0;
	this.data.each(function(item){
		var size = webix.html.getTextSize(item.value);
		var width = 70 + size.width;
		if(width > maxWidth)
			maxWidth = width;
	});
        this.define("width",maxWidth);
	this.resize();
    }
},...