Toolbar Rendering Issues

**tryanDLS** · 11 Dec 2006 3:04 PM

I was going to post this in Bugs, but since Toolbar is still kind of 'first pass' functionality, I figured it could go here for further discussion, and serve as ref to anyone who might come across this issue.

There's a problem with toolbar styling in FF (looks OK in IE). On mouseover, the highlight does not always match the size of the toolbar item. In the following example when you mouseover 'Add', it's hilighted correctly. When you mouseover 'Delete' the hilight is only partly over the text.

This is b/c of the width:16px in .ytoolbar .ytb-button-inner, which is applied regardless of whether there's a background image or not (IE seems to ignore the width).

Looking at the generated HTML, I see this.

Code:

<span class="ytb-button-inner undefined">Add</span>
<span class="ytb-button-inner undefined">Delete</span>

I haven't dug deeper yet to see if 'undefined' is just a result of not specifying an image in the button config. In the short term you can change to 'width:auto' to handle text-only toolbar items. Here's a sample to illustrate the problem.

Code:

	<script type="text/javascript" src="/yui/build/utilities/utilities.js"></script>
	<script type="text/javascript" src="/yui-ext/yui-ext.js"></script>

	<link rel="stylesheet" type="text/css" href="/yui-ext/resources/css/yui-ext.css" />
	<link rel="stylesheet" type="text/css" href="../examples.css" />

<script type="text/javascript">
var exToolbar = {

	addRow: function() {
		alert('add');
	},
	deleteRow: function() {
		alert('delete');
	},

    init: function() {
		var tb = new YAHOO.ext.Toolbar('exToolbar');
		tb.addButton({
			text: 'Add',
			click: this.addRow
		});
		tb.addSeparator();
		tb.addButton({
			text: 'Delete',
			click: this.deleteRow
		});
    }
}
YAHOO.ext.EventManager.onDocumentReady(exToolbar.init, exToolbar, true);

</script>
</head>
<body>
<h1>Toolbar Example</h1>

<div class="ygrid-mso" style="width:530px;">
	<div id="exToolbar"></div>
</div>
</body>

**jack.slocum** · 11 Dec 2006 7:31 PM

All toolbar buttons must have a class, and I would guess you haven't provided a class (hence the "undefined"). Toolbar buttons are by default icon only (16x16) like a standard toolbar. They have been setup with all the css properties so all they need is the background-image css property. If you are setting up a standard toolbar with icons, this is very convenient.

To create a button with text and icon (or just text) you have to provide a class with the appropriate css. I've added two classes in toolbar.css in svn for you. One is .ytb-text-icon and the other is .ytb-text-only. In your case you would use ytb-text-only as your class name and it will fix the issue.

**tryanDLS** · 12 Dec 2006 12:03 PM

Cool thanks.

It's not really documented, but you can pass 'disabled:true/false' in the config. Can you add a line in init() to do

Code:

this.setDisabled(this.disabled);

that way the effects will match if you call disable() or set it via config

Toolbar Rendering Issues

Thread Tools

Search Thread

Display

Toolbar Rendering Issues

Toolbar Rendering Issues

Similar Threads

ToolBar issues

Minor grid paging toolbar issues

Rev 8: Toolbar issues with IE7?

Rendering problem in layoutdialog + toolbar + tabpanel

grid toolbar display issues in IE