Skip to main content

Search and Top Navigation

#5382 closed bug (fixed)

Opened March 20, 2010 02:37AM UTC

Closed May 26, 2010 07:09PM UTC

Last modified September 20, 2010 05:39PM UTC

Button: specifying only a secondary icon for the button widget locates the icon on the left

Reported by: rdworth Owned by:
Priority: major Milestone: 1.8.3
Component: ui.button Version: 1.8
Keywords: Cc:
Blocked by: Blocking:
Attachments (0)
Change History (8)

Changed March 20, 2010 02:38AM UTC by rdworth comment:1

milestone: TBD1.8.1

Changed March 22, 2010 04:36PM UTC by IYS comment:2

The following changes will resolve the issue until an official fix is released:

jquery.ui.button.js:


		_resetButton: function() {
			if (this.type === "input") {
				if (this.options.label) {
					this.element.val(this.options.label);
				}
				return;
			}
			var buttonElement = this.buttonElement,
			buttonText = $("<span></span>")
				.addClass("ui-button-text")
				.html(this.options.label)
				.appendTo(buttonElement.empty())
				.text(),
			icons = this.options.icons,
			multipleIcons = icons.primary && icons.secondary;
			if (icons.primary || icons.secondary) {
				if (!icons.primary)
					buttonElement.addClass("ui-button-text-secondary-icon");
				else
					buttonElement.addClass("ui-button-text-icon" +
						(multipleIcons ? "s" : ""));
				if (icons.primary) {
					buttonElement.prepend("<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>");
				}
				if (icons.secondary) {
					buttonElement.append("<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>");
				}
				if (!this.options.text) {
					buttonElement
					.addClass(multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only")
					.removeClass("ui-button-text-icons ui-button-text-icon ui-button-text-secondary-icon");
					if (!this.hasTitle) {
						buttonElement.attr("title", buttonText);
					}
				}
			} else {
				buttonElement.addClass("ui-button-text-only");
			}
		}

jquery.ui.button.cs:


/* Button
----------------------------------*/

.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; } 
button.ui-button-icons-only { width: 3.7em; } 

/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-secondary-icon .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }

/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-secondary-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-text-secondary-icon .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }

/*button sets*/
.ui-buttonset { margin-right: 7px; }
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }

/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */

Changed March 22, 2010 11:45PM UTC by IYS comment:3

Correction:

The jquery.ui.button.cs file I listed previously is incorrect. At some point, I had merged my changes with what must have been an older jquery.ui.button.cs file. The correct file (as of 1.8rc3) is listed below:

jquery.ui.button.cs


/* Button
----------------------------------*/

.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3em; } 
button.ui-button-icons-only { width: 3.2em; } 

/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 1.8em; }
.ui-button-text-secondary-icon .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-right: 1.8em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }

/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-secondary-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon .ui-icon-primary, .ui-button-text-icons .ui-icon-primary, .ui-button-icons-only .ui-icon-primary { left: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-text-secondary-icon .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }

/*button sets*/
.ui-button-set { margin-right: 7px; }
.ui-button-set .ui-button { margin-left: 0; margin-right: -.3em; }

/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */

Changed May 23, 2010 02:31AM UTC by rdworth comment:5

resolution: → wontfix
status: newclosed

From http://forum.jquery.com/topic/jquery-ui-button-use-only-secondary-icon

"There's no feature to implement as there's no change to be made in the javascript. As far as the css, the default is for the primary icon to be displayed on the left, secondary on the right. As designed, this can be overridden with css."

"A button with a single icon should have one primary icon and no secondary icon, whether it's displayed on the right or the left."

See also http://forum.jquery.com/topic/a-button-with-an-icon-just-on-the-right

Changed May 26, 2010 04:33PM UTC by jzaefferer comment:6

resolution: wontfix
status: closedreopened

After some more discussion we plan to fix this. Visual test: http://view.jqueryui.com/master/tests/visual/button/button.html

Changed May 26, 2010 07:09PM UTC by rdworth comment:7

resolution: → fixed
status: reopenedclosed

Fixed in 202ddd0

Changed August 04, 2010 01:22AM UTC by scottgonzalez comment:8

milestone: 1.91.8.3