Tabbed UI - Adaptive Button Pane??

[mikeallenbrown]

My tabbed UI has the button pane on the left. I have a reports section with a tree control and several tree branches to organize various reports. My problem is that some of the report names can get a little long and thus become obscured behind the window part of the tabbed UI (see pics below...). Is there a way to make the pane and/or window adaptive so when this is opened it shifts to the right (red arrows in pic) and allows the entire report name to be visible? I can set a static width but then when the reports are collapsed it looks funny (see second pic).

Pic #1


Pic #2

[Clipper87]

Re: Tabbed UI - Adaptive Button Pane??

Smells like an interesting feature request! You could check with Selwyn.

[mhammond71]

Re: Tabbed UI - Adaptive Button Pane??

Are your report names in the pane built dynamically or are they static? If they are static then the answer is very simple. Remember that every label is in a HTML element. So you are entering .innerHTML when designating a label. So the easiest thing to do here is to put a break in your name. Like this: "This is a long </br> report name." That will put your label on two lines.

[mikeallenbrown]

Re: Tabbed UI - Adaptive Button Pane??

Are your report names in the pane built dynamically or are they static? If they are static then the answer is very simple. Remember that every label is in a HTML element. So you are entering .innerHTML when designating a label. So the easiest thing to do here is to put a break in your name. Like this: "This is a long </br> report name." That will put your label on two lines.

Thank you for the reply. I could do that, however, it isn't very aesthetically pleasing.

[Selwyn Rabins]

Re: Tabbed UI - Adaptive Button Pane??

My tabbed UI has the button pane on the left. I have a reports section with a tree control and several tree branches to organize various reports. My problem is that some of the report names can get a little long and thus become obscured behind the window part of the tabbed UI (see pics below...). Is there a way to make the pane and/or window adaptive so when this is opened it shifts to the right (red arrows in pic) and allows the entire report name to be visible? I can set a static width but then when the reports are collapsed it looks funny (see second pic).

Pic #1


Pic #2

it is pretty easy for you to add this functionality yourself with some simple javascript

see video

http://screencast.com/t/2RvN4biYh5

[Davidk]

Re: Tabbed UI - Adaptive Button Pane??

If you don't mind a bit more complicated Javascript and setup then have a look... and here's the code. It's kinda gross but seems to work.

I don't know if this will hold up in the real world, but... try it and post your results. Maybe it can be find tuned.

As well, maybe the Branch events would be better... I haven't looked at that yet.

http://www.youtube.com/watch?v=H1ZjKwVop2I


Expand Event:

var currW = $('tbi.MENUPANEL').style.width;

var currPX = currW;
var currSize = currPX.substring(0, currPX.length - 2);

var priorWidth = 250;
var padWidth = 0;

var tree_branch = document.getElementsByClassName('MobBlueTreeBranch');
for (var i = 0; i < tree_branch.length; i++) {
	var currDisplay = tree_branch[i].style.display;	// equal to block if displayed
	if (currDisplay != 'none'){
	
		var branch_ele = tree_branch[i].getElementsByClassName('myclass');
		var branch_text = branch_ele[0].innerHTML;
		

		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext("2d");
		ctx.font = "15px Arial";        
		var textWidth = ctx.measureText(branch_text).width;
		
			if (textWidth < 250) {
				textWidth = 250;
				}

		

	if (textWidth >= priorWidth) {
		padWidth = 160;
		newSize = parseInt(textWidth) + padWidth + "px";
		$('tbi.MENUPANEL').style.width = newSize;
		}

	priorWidth = textWidth;			

		
	}
}

Collapse Event:

var currW = $('tbi.MENUPANEL').style.width;

var currPX = currW;
var currSize = currPX.substring(0, currPX.length - 2);

var priorWidth = 250;
var padWidth = 0;

//debugger;
var tree_branch = document.getElementsByClassName('MobBlueTreeBranch');
for (var i = 0; i < tree_branch.length; i++) {
	var currDisplay = tree_branch[i].style.display;	// equal to block if displayed
	if (currDisplay != 'none'){
	
		var branch_ele = tree_branch[i].getElementsByClassName('myclass');
		var branch_text = branch_ele[0].innerHTML;
		

		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext("2d");
		ctx.font = "15px Arial";        
		var textWidth = ctx.measureText(branch_text).width;
		
			if (textWidth < 250) {
				textWidth = 250;
				}

	if (textWidth >= priorWidth) {
		if (i==0){
			padWidth = 0;
			}
			else
			{
			padWidth = 160;
			}
		newSize = parseInt(textWidth) + padWidth + "px";
		$('tbi.MENUPANEL').style.width = newSize;
		}

	priorWidth = textWidth;			

		
	}
	else
	{
	return;
	}
}

[Clipper87]

Re: Tabbed UI - Adaptive Button Pane??

Another approach in a situation where you have multiple tree branches with every tree branch at the same level as the previous one would be to allow only one tree branch to be opened at a time & combine that with Selwyn's solution. That would allow every tree branche to have a different width; upon closing you'd then always revert to THE minimum width without having to care about what tree branch might still be open and having to check out the needed width.

[mikeallenbrown]

Re: Tabbed UI - Adaptive Button Pane??

it is pretty easy for you to add this functionality yourself with some simple javascript

see video

http://screencast.com/t/2RvN4biYh5

Thank you!

[411tech]

Re: Tabbed UI - Adaptive Button Pane??

Could you not just copy the report name to the 'BubbleHelp' property. When the user hovers over the report name, they will see the entire report name. Might not be what you wanted, but very easy to implement. You could go further and give further details of the report than just the name.

[mikeallenbrown]

Re: Tabbed UI - Adaptive Button Pane??

Could you not just copy the report name to the 'BubbleHelp' property. When the user hovers over the report name, they will see the entire report name. Might not be what you wanted, but very easy to implement. You could go further and give further details of the report than just the name.

Thats a good idea. I could probably use that else where. Thanks!