Permalink
Browse files

Menu: Vertically center icons. Fix menu item wiggle and clearing in IE8

Fixes #9995
Closes gh-1235
  • Loading branch information...
tcrowley authored and jzaefferer committed Apr 25, 2014
1 parent 6ef5c38 commit b0e8380f023f41cb4a1bd3665177b5f0e795c289
Showing with 7 additions and 7 deletions.
  1. +7 −7 themes/base/menu.css
View
@@ -19,9 +19,9 @@
position: absolute;
}
.ui-menu .ui-menu-item {
position: relative;
margin: 0;
display: block;
padding: 3px .4em;
padding: 3px 1em 3px .4em;
cursor: pointer;
min-height: 0; /* support: IE7 */
/* support: IE10, see #8844 */
@@ -44,20 +44,20 @@
position: relative;
}
.ui-menu-icons .ui-menu-item {
position: relative;
padding-left: 2em;
}
/* left-aligned */
.ui-menu .ui-icon {
position: absolute;
top: .2em;
top: 0;
bottom: 0;
left: .2em;
margin: auto 0;
}
/* right-aligned */
.ui-menu .ui-menu-icon {
position: relative;
top: -.2em;
float: right;
left: auto;
right: 0;
}

5 comments on commit b0e8380

@jzaefferer

This comment has been minimized.

Show comment
Hide comment
@jzaefferer

jzaefferer Jun 10, 2014

Member

This causes selectmenu tests to fail in IEs and Safari, starting with this job: http://swarm.jquery.org/job/3012

@fnagel is looking into it.

Member

jzaefferer replied Jun 10, 2014

This causes selectmenu tests to fail in IEs and Safari, starting with this job: http://swarm.jquery.org/job/3012

@fnagel is looking into it.

@fnagel

This comment has been minimized.

Show comment
Hide comment
@fnagel

fnagel Jun 11, 2014

Member

The issue is caused by the .ui-menu .ui-menu-item change of padding. Strange enough as we use outerWidth() to calculate the width. Any idea why this wont work and how to fix this? Width calculation seems to work as expected when not running within the unit tests.

Another question: Do we want different (left and right) paddings for the item? It doesn't seems to make sense, at least for selectmenu.

Member

fnagel replied Jun 11, 2014

The issue is caused by the .ui-menu .ui-menu-item change of padding. Strange enough as we use outerWidth() to calculate the width. Any idea why this wont work and how to fix this? Width calculation seems to work as expected when not running within the unit tests.

Another question: Do we want different (left and right) paddings for the item? It doesn't seems to make sense, at least for selectmenu.

@jzaefferer

This comment has been minimized.

Show comment
Hide comment
@jzaefferer

jzaefferer Jun 11, 2014

Member

@tcrowley @tjvantoll could you take a look at these failing tests and what @fnagel described above?

Member

jzaefferer replied Jun 11, 2014

@tcrowley @tjvantoll could you take a look at these failing tests and what @fnagel described above?

@tjvantoll

This comment has been minimized.

Show comment
Hide comment
@tjvantoll

tjvantoll Jun 13, 2014

Member

@jzaefferer Yeah, sorry for the late reply. I'll take a look on Monday.

Member

tjvantoll replied Jun 13, 2014

@jzaefferer Yeah, sorry for the late reply. I'll take a look on Monday.

@tjvantoll

This comment has been minimized.

Show comment
Hide comment
@tjvantoll

tjvantoll Jun 16, 2014

Member

Another question: Do we want different (left and right) paddings for the item? It doesn't seems to make sense, at least for selectmenu.

I think the padding difference was to account for the icons, but if so, that change should only be present in the .ui-menu-icons .ui-menu-item rule.

The test that is failing is checking that the button's width equals the menu's width by default, but this check in menu is making the menu a bit larger. I'm not sure why different padding is affecting this... and only in certain browsers.

However if we can move the padding rule I think it'll subvert the issue. I'll play with this.

Member

tjvantoll replied Jun 16, 2014

Another question: Do we want different (left and right) paddings for the item? It doesn't seems to make sense, at least for selectmenu.

I think the padding difference was to account for the icons, but if so, that change should only be present in the .ui-menu-icons .ui-menu-item rule.

The test that is failing is checking that the button's width equals the menu's width by default, but this check in menu is making the menu a bit larger. I'm not sure why different padding is affecting this... and only in certain browsers.

However if we can move the padding rule I think it'll subvert the issue. I'll play with this.

Please sign in to comment.