Ticket #4447 (closed bug: wontfix)

Opened 5 years ago

Last modified 7 months ago

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:
Blocking: Blocked by:

Description (last modified by scottjehl) (diff)

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

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

Change History

Changed 5 years ago by epascarello

comment:1 Changed 5 years ago by rdworth

  • Component changed from ui.core to CSS Framework
  • Milestone changed from TBD to 1.8

Changed 5 years ago by andreas

Changed 5 years ago by andreas

comment:2 follow-up: ↓ 3 Changed 5 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 5 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 5 years ago by scottjehl

  • Status changed from new to closed
  • Resolution set to fixed
  • Description modified (diff)

fixed in revs 1001,1002,1003 in website svn

comment:5 Changed 5 years ago by rdworth

  • Milestone changed from 1.8 to 1.7.2

comment:6 Changed 4 years ago by nic.austin

  • Status changed from closed to reopened
  • Resolution fixed deleted

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

comment:7 Changed 4 years ago by scott.gonzalez

  • Milestone changed from 1.7.2 to 1.9

comment:8 follow-up: ↓ 9 Changed 4 years ago by scott.gonzalez

  • Priority changed from critical to major

comment:9 in reply to: ↑ 8 ; follow-up: ↓ 10 Changed 4 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 ; follow-up: ↓ 11 Changed 4 years ago by scott.gonzalez

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 3 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 3 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 3 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 3 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 2 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 2 years ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 1.10.0

comment:17 Changed 2 years ago by mikesherov

  • Status changed from reopened to open

comment:18 Changed 20 months ago by tj.vantoll

  • Milestone changed from 1.10.0 to none

comment:19 Changed 7 months ago by scott.gonzalez

  • Status changed from open to closed
  • Resolution set to wontfix

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.