Layout - Minimum Cell Width/Height

Suite and Optimus Suite 5
#1

Is it possible to control the minimum height and/or width for a given cell in a layout without changing the codebase as it is delivered?
Ideally this value would not allow the resize bar to go beyond the minimum (giving the user a visual indication that the drag will not go as far as they want.)

Thanks,

  • Dave
#2

There isn’t a public functionality to do that. But you may try to use the _minH (height) and _minW (width) private cell properties:

dhxLayout.cells(“a”)._minH = 100;
dhxLayout.cells(“b”)._minW = 100;
dhxLayout.setEffect(“resize”, true); /*is necessary to apply _minH and _minW */

#3

That’ll work!

dhtmlXLayoutObject.prototype.setMinCellSize = function(obj) {
	if (typeof(obj) != "object") return;
	var thisId;
	this.forEachItem(function(item){
		thisId = item.getId();
		if (typeof(obj[thisId])=="object") {
			if (Number(obj[thisId].minH)) {
				item._minH = Number(obj[thisId].minH);
				if (item.getHeight()<item._minH) {
					item.setHeight(item._minH);
				}
			}
			if (Number(obj[thisId].minW)) {
				item._minW = Number(obj[thisId].minW);
				if (item.getWidth()<item._minW) {
					item.setWidth(item._minW);
				}
			}
		}
	});
	this.setEffect("resize",true);
}

// Sample call:
myLayout.setMinCellSize({"a":{"minW":100},"b":{"minW":200,"minH":80},"d":{"minH":150}});

Thanks,

  • Dave
#4

This use to work until upgrading to version 4.
Now since setEffects is deprecated, how would we set the minimum width of a specific cell?

#5

Hi, AlanF
Please, describe your situation in details.
DHTMLX sourse code was strongly changed since that time.
We need to get sense of your case.

#6

Sorry, I thought you would see the rest of the thread.
Situation:
I have a dhtmlXLayout with 3 cells (“3W”)
Cell “a” is fixed size
Cells “b” and “c” are not fixed in width.
We need to allow cell “b” to be dragged wider but only dragged smaller to a minimum width (460)

Under DhtmlX 3.6 this could be done by using…

 dhxLayout.cells('b')._minW = 460;
 dhxLayout.setEffect("resize",true);

Under DhtmlX 4, setEffect is deprecated and it looks like _minW is no longer present.

Question:
How do I set the minimum width of a single cell using DhtmlX 4.
This was functionality present under DhtmlX 3.6 and is very important to us.

Thanks,
-Alan

DhtmlX 3.6 sample:

dhxLayout = new dhtmlXLayoutObject({
	parent: "dhxLayoutDiv",
	pattern: "3W",
	skin: "dhx_skyblue",

	cells: [{
			id:             "a",         // id of the cell you want to configure
			text:           "Menu",      // header text
			collapsed_text: "Menu",      // header text for a collapsed cell
			header:         true,        // hide header on init
			width:          200,         // cell init width
			collapse:       false,       // collapse on init
			fix_size:       [true,true]  // fix cell's size, [width,height]
		},
		{	id:             "b",         // id of the cell you want to configure
			text:           " ",         // header text
			collapsed_text: " ",         // header text for a collapsed cell
			header:         true,        // hide header on init
			width:          460,         // cell init width
			collapse:       false,       // collapse on init
			fix_size:       [false,true] // fix cell's size, [width,height]
		},
		{	id:             "c",         // id of the cell you want to configure
			text:           " ",         // header text
			collapsed_text: " ",         // header text for a collapsed cell
			header:         true,        // hide header on init
			collapse:       false,       // collapse on init
			fix_size:       [false,true] // fix cell's size, [width,height]
		}
	]
});

dhxLayout.cells('b')._minW = 460;
dhxLayout.setEffect("resize",true);
#7

Hi

I will add this into the future release, for now you can use the following code

function changeMinWidth(cell, value) { cell.conf._minW = value; cell._getMinWidth2 = cell._getMinWidth; cell._getMinWidth = function() { return Math.max(this._getMinWidth2.apply(this,arguments), this.conf._minW||0); } }; var myLayout = new dhtmlXLayoutObject("layoutObj", "3W"); changeMinWidth(myLayout.cells("b"), 100);

#8

Thank you, sir

#9

Hi!
your changeMinWidth function works great, but when you resize the window to a small size, it resizes the layout cell under the minimum that was set.

Once you try to manually resize the cell, it automatically resizes to minimum widht that was set with changeMinWidth

What would be the best solution for that?

Thanks!

#10

Hi

Could you please provide us complete demo including all correspondnig js/css files?
Please also add information regarding current and expected behaviour.

Here is a small guide how to make a complete demo:
docs.dhtmlx.com/tutorials__auxil … pport.html

If you’re using PRO Edition please send your demo to support@dhtmlx.com

#11

Thanks, I already sent you the demo.
:slight_smile:

#12

Hi, still the same problem.

I have made a simple demo: resize_MinWidth.zip (699 KB)

  1. Resize your browser to 800px (or less)

  2. Refresh the browser
    Problem 1: Now you will see that the right layout is smaller than its minimum.

  3. Now resize the layout
    Problem 2: the left layout disapears and you can’t get it back.

Thanks.

#13

Hi, yes I can confirm the issue. We will try to include a fix in the next build

#14

Hi, do you mean in the next dhtmlx 5.0.x build?
I am currently using v 4.0.3
Will we have a fix for this version?

Thanks.

#15

The fix will be included in the next latest 5.x dhtmlx build.
If you need to apply the patch for your current version please, open ticket with the request in support.dhtmlx.com