PDA

View Full Version : Toolbar in HTML Table



smcguire36
4 Jan 2011, 2:46 PM
I have a toolbar that I am rendering into a td tag at the top of an HTML table (I don't want to rewrite the entire page as an Ext Viewport at this time). All the toolbar buttons render ok except that the toolbar is making the buttons take up the entire width of the toolbar!

1. Why would it be doing that?
2. How can I make it display the buttons the normal way (using only as much width as each button needs)?

The following code is in my Ext.onReady() function:



var tb = new Ext.Toolbar({
buttonAlign: 'left',
enableOverflow: true
});
tb.render('toolbarTD');

tb.add({
text: 'Filter',
cls: 'x-btn-text-icon',
iconCls: 'FilterButton',
handler: onFilterClick
}, {
text: 'Start Workflow',
cls: 'x-btn-text-icon',
iconCls: 'StartButton',
handler: onStartClick,
workflowId: '40' // Custom Attribute
}, {
text: 'Permissions',
cls: 'x-btn-text-icon',
iconCls: 'PermissionButton',
handler: onPermissionClick
});
tb.doLayout();
});


The classes for the icons only contain a background-image style.

Can anyone help me?

Stewart McGuire

smcguire36
5 Jan 2011, 7:05 AM
As a follow up to this problem, the toolbar displays correctly in Google Chrome and Firefox but not in IE 8. In IE 8 each of the 3 buttons is a third of the width of the toolbar and the icon and text are centered in the middle of each VERY wide button!

Condor
5 Jan 2011, 7:10 AM
Buttons are rendered as a <table> too, so any css styling for your <table> will also be applied to buttons.

You will need to add some extra css to counter your <table> style on the button.

ps. I recommend looking at the FitToParent plugin if you are not planning on using an Ext.Viewport.

smcguire36
5 Jan 2011, 8:20 AM
Condor, THANKS!!!! You hit the nail on the head! This page was not one that I originally wrote. There was a style block at the top of the page that had the following in it:



table {
table-layout: fixed;
}


I see that it affected ALL the table tags on the page, not just the one that it was supposed to affect. I moved that style into a named class and applied it to the table that required it and the toolbar now displays correctly!

Thanks again for you help!

--Stewart McGuire