Tool bar widths in percentages

Suite and Optimus Suite 5
#1

Hi. I want to set the button widths of a toolbar in percentages.
Like:

<?xml version='1.0' encoding='iso-8859-1'?> button1 button1 button1

This code is working well in IE. But in firefox, the width of each button is half of the expected.
This m8 be happening because of the highlighted line of the following code in dhtmlxtoolbar.js

[i]dhtmlXToolbarObject.prototype._create_self=function()
{
if(!this.width) this.width=1;
if(!this.height) this.height=1;

  var div=document.createElement("div");
     div.innerHTML='<table cellpadding="0" cellspacing="1" class="'+this.tableCSS+'" style="display:none" width="'+this.width+'" height="'+this.height+'"><tbody>' +
                 '<tr>'+
                 '<td width="'+(_isFF?5:3)+'px"><div class="toolbarHandle" '+(_isIE&&!this._isIE7s?"style='width:1px'":"")+'>&nbsp;</div></td>'+
                 '<td class="'+this.titleCSS+'" style="display:none">'+this.name+'</td>'+
                 '<td></td>'+
                [b] '<td align="right" width="100%" class="'+this.titleCSS+'"[/b] style="display:none">'+this.name+'</td>'+
                 '<td></td>'+
                 '</tr></tbody></table>';
     var table=div.childNodes[0];
     table.setAttribute("UNSELECTABLE","on");
     table.onselectstart=this.badDummy;         
  this.topNod=table; 
  this.dividerCell=table.childNodes[0].childNodes[0].childNodes[0];
  this.dividerCell.toolbar=this;
  this.preNameCell=this.dividerCell.nextSibling;
  this.firstCell=this.preNameCell.nextSibling;
  this.nameCell=this.firstCell.nextSibling;
  this.crossCell=this.nameCell.nextSibling;
  
  this.parentObject.appendChild(table);
  };[/i]

The width of the last

in toolbar object which displays the name of the toolbar is set to 100% which is causing different behavior in IE and Firefox.

And FYI, the code below has a typo :

[i]dhtmlXToolbarObject.prototype._create_self_vertical=function()
{
if(!this.width) this.width=1;
if(!this.height) this.height=1;

  var div=document.createElement("div");
     div.innerHTML='<table cellpadding="0" cellspacing="1" class="'+this.tableCSS+'" style="display:none" width="'+this.width+'" height="'+this.height+'"><tbody>' +
                 '<tr><td [b]heigth[/b]="'+(_isFF?5:3)+'px"><div class="vtoolbarHandle" style="width:100%; '+(_isIE?"height:3px":"")+' overflow:hidden"></div></td></tr>'+
                 '<tr><td height="100%" class="'+this.titleCSS+'" style="display:none">'+this.name+'</td></tr>'+
                 '<tr><td></td></tr>'+
                 '<tr><td align="right" height="100%" class="'+this.titleCSS+'" style="display:none">'+this.name+'</td></tr>'+
                 '<tr><td></td></tr>'+
                 '</tbody></table>';[/i]
#2

Hi,

Probably your question relates some old version of toolbar. In v.2.0 toolbar got the new xml format. However, neither 1.0 nor the latest (3.0) version supports width in percent.

Unfortunately, there is not possiblity to define an item width in percent

#3

Hi … where can find the XML formats of all DHTML components for version 2.0 :question:

#4

Hi,

here is the xml format examples:

dhtmlx.com/docs/products/doc … index.html

Please see Toolbar 2.x

Also you may have a look at samples from toolbar package