Opened 14 years ago

Closed 10 years ago

#4447 closed bug (wontfix)

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 (last modified by scottjehl)

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)

arrowsBadlyLinedUp.PNG (16.0 KB) - added by epascarello 14 years ago.
fixed_icons_not_optipngd.zip (63.5 KB) - added by andreas 14 years ago.
fixed_icons_optipngd_o7.zip (21.8 KB) - added by andreas 14 years ago.

Download all attachments as: .zip

Change History (22)

Changed 14 years ago by epascarello

Attachment: arrowsBadlyLinedUp.PNG added

comment:1 Changed 14 years ago by rdworth

Component: ui.coreCSS Framework
Milestone: TBD1.8

Changed 14 years ago by andreas

Changed 14 years ago by andreas

Attachment: fixed_icons_optipngd_o7.zip added

comment:2 Changed 14 years ago by 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.

comment:3 in reply to:  2 Changed 14 years ago by andreas

Replying to 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.

comment:4 Changed 14 years ago by scottjehl

Description: modified (diff)
Resolution: fixed
Status: newclosed

fixed in revs 1001,1002,1003 in website svn

comment:5 Changed 14 years ago by rdworth

Milestone: 1.81.7.2

comment:6 Changed 13 years ago by nic.austin

Resolution: fixed
Status: closedreopened

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

comment:7 Changed 13 years ago by Scott González

Milestone: 1.7.21.9

comment:8 Changed 13 years ago by Scott González

Priority: criticalmajor

comment:9 in reply to:  8 ; Changed 13 years ago by banzor

Replying to 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.

comment:10 in reply to:  9 ; Changed 13 years ago by Scott González

Replying to 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.

comment:11 in reply to:  10 Changed 12 years ago by k_borchers

Replying to 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.

comment:12 Changed 12 years ago by cameron

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.

comment:13 Changed 12 years ago by rdworth

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.

comment:14 Changed 12 years ago by drknoxy

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.

comment:15 Changed 11 years ago by bthurber

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.

comment:16 Changed 11 years ago by Scott González

Milestone: 1.9.01.10.0

comment:17 Changed 11 years ago by mikesherov

Status: reopenedopen

comment:18 Changed 11 years ago by tj.vantoll

Milestone: 1.10.0none

comment:19 Changed 10 years ago by Scott González

Resolution: wontfix
Status: openclosed

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.

Note: See TracTickets for help on using tickets.