#4447 closed bug (wontfix)

Opened April 08, 2009 07:23PM UTC

Closed February 26, 2014 03:06PM UTC

UI Icons are not even, causes misaligned buttons

Reported by: epascarello Owned by:
Priority: major Milestone: none
Component: ui.css-framework Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

Place an East and West arrow icon side by side. When you look at the arrow icons you will see they are all on a different y axis. Seems like they were rotated on a wrong central point.

.ui-icon-triangle-1-e

.ui-icon-triangle-1-w

You can see an example on the Grid mock-up: http://jquery-ui.googlecode.com/svn/branches/dev/grid/tests/static/grid/default.html

I attached a blown up version showing how off the arrows are when looking at ui-icons_222222_256x240.png.

As a temp fix, the CSS can be adjusted so the sprite is lined up correctly.

Attachments (3)
Change History (19)

Changed April 08, 2009 09:03PM UTC by rdworth comment:1

component: ui.core → CSS Framework
milestone: TBD → 1.8

Changed April 17, 2009 11:25PM UTC by epascarello comment:2

The changes andreas made to the buttons appears to fix the alignment issue with the east/west arrows.

When checking this, I noticed that the North and South arrows .ui-icon-triangle-1-n

.ui-icon-triangle-1-s and not centered in the x direction. It appears that the width can not be divided evenly in the icon width.

Changed April 21, 2009 04:33PM UTC by andreas comment:3

Replying to [comment:2 epascarello]:

The changes andreas made to the buttons appears to fix the alignment issue with the east/west arrows. When checking this, I noticed that the North and South arrows .ui-icon-triangle-1-n .ui-icon-triangle-1-s and not centered in the x direction. It appears that the width can not be divided evenly in the icon width.

The east/west aren't vertical aligned either because of icon height.

Changed May 06, 2009 02:53PM UTC by scottjehl comment:4

description: Place an East and West arrow icon side by side. When you look at the arrow icons you will see they are all on a different y axis. Seems like they were rotated on a wrong central point. \ [[BR]] \ .ui-icon-triangle-1-e[[BR]] \ .ui-icon-triangle-1-w[[BR]] \ \ You can see an example on the Grid mock-up: [http://jquery-ui.googlecode.com/svn/branches/dev/grid/tests/static/grid/default.html] \ \ I attached a blown up version showing how off the arrows are when looking at ui-icons_222222_256x240.png. \ \ As a temp fix, the CSS can be adjusted so the sprite is lined up correctly. → Place an East and West arrow icon side by side. When you look at the arrow icons you will see they are all on a different y axis. Seems like they were rotated on a wrong central point. \ [[BR]] \ .ui-icon-triangle-1-e[[BR]] \ .ui-icon-triangle-1-w[[BR]] \ \ You can see an example on the Grid mock-up: [http://jquery-ui.googlecode.com/svn/branches/dev/grid/tests/static/grid/default.html] \ \ I attached a blown up version showing how off the arrows are when looking at ui-icons_222222_256x240.png. \ \ As a temp fix, the CSS can be adjusted so the sprite is lined up correctly. \ \
resolution: → fixed
status: new → closed

fixed in revs 1001,1002,1003 in website svn

Changed June 12, 2009 12:39PM UTC by rdworth comment:5

milestone: 1.8 → 1.7.2

Changed July 14, 2010 06:55PM UTC by nic.austin comment:6

resolution: fixed
status: closed → reopened

I still see in 1.8.2 that the North and South arrows are not horizontally aligned

Changed July 14, 2010 07:19PM UTC by scottgonzalez comment:7

milestone: 1.7.2 → 1.9

Changed October 19, 2010 03:54PM UTC by scottgonzalez comment:8

priority: critical → major

Changed November 22, 2010 08:14PM UTC by banzor comment:9

Replying to [comment:8 scott.gonzalez]: This issue is noticed in ui-icon-bullet as well. Maybe all icons should be eval'd to see which ones have an odd px width of their inner graphic. Can we help in any way? I might be able to check all of them if you want.

Changed November 22, 2010 10:06PM UTC by scottgonzalez comment:10

Replying to [comment:9 banzor]:

Unfortunately the source for the sprite is in a private repo for ThemeRoller. We're hoping to open it up after the rewrite. I think this may have actually been addressed already, but we haven't moved to the new icon sprite yet.

Changed June 21, 2011 05:58PM UTC by k_borchers comment:11

Replying to [comment:10 scott.gonzalez]: Any progress on this? I am running into the ui-icon-bullet issue now when working on Menu since it doesn't align with ui-icon-radio-off to use it as the checked radio button.

Changed November 15, 2011 09:12PM UTC by cameron comment:12

Still noticed this problem in 1.8.16 for ui-icon-triangle-1-s... it's currently listed as:

.ui-icon-triangle-1-s { background-position: -64px -16px; }

and should be

.ui-icon-triangle-1-s { background-position: -65px -16px; }

Going to override it, but would be nice if it was correct in the style sheet.

Changed November 15, 2011 09:47PM UTC by rdworth comment:13

The position values in the css are correct as the sprite image is made up of 16px by 16px cells. It's the image date itself that needs adjusting. As you found, this override is a reasonable workaround in the meantime.

Changed December 01, 2011 07:45AM UTC by drknoxy comment:14

Downloaded the latest github jquery-ui and checked the images. This issue has been fixed if these icon images are the only source files for theme rolling.

Changed April 06, 2012 08:08PM UTC by bthurber comment:15

It seems even in latest github that the N/S images aren't going to align properly. Either N needs to move one pixel to the Right or S needs to move one pixel to the Left OR new images will need to be created that take the same amount of pixels on either side.

Changed October 11, 2012 02:40PM UTC by scottgonzalez comment:16

milestone: 1.9.0 → 1.10.0

Changed October 27, 2012 08:19PM UTC by mikesherov comment:17

status: reopened → open

Changed January 25, 2013 09:22PM UTC by tj.vantoll comment:18

milestone: 1.10.0 → none

Changed February 26, 2014 03:06PM UTC by scottgonzalez comment:19

resolution: → wontfix
status: open → closed

At this point, I think this is a won't fix. We'll just need to make sure the new CSS framework doesn't have these issues.