#5382 closed bug (fixed)
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: |
Change History (8)
comment:1 Changed 13 years ago by
Milestone: | TBD → 1.8.1 |
---|
comment:2 Changed 13 years ago by
comment:3 Changed 13 years ago by
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 */
comment:4 Changed 13 years ago by
comment:5 Changed 13 years ago by
Resolution: | → wontfix |
---|---|
Status: | new → closed |
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
comment:6 Changed 13 years ago by
Resolution: | wontfix |
---|---|
Status: | closed → reopened |
After some more discussion we plan to fix this. Visual test: http://view.jqueryui.com/master/tests/visual/button/button.html
comment:8 Changed 13 years ago by
Milestone: | 1.9 → 1.8.3 |
---|
The following changes will resolve the issue until an official fix is released:
jquery.ui.button.js:
jquery.ui.button.cs: