[wp-trac] [WordPress Trac] #32664: Customizer Menus: menu items are cut off in IE8

[WordPress Trac]

#32664: Customizer Menus: menu items are cut off in IE8
--------------------------+-----------------------------
 Reporter:  designsimply  |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Customize     |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:  ui            |
--------------------------+-----------------------------
 Steps to reproduce:

 1. Install WP r32806 or later
 1. Go to Appearance > Customizer > Menus using IE8

 '''Result:''' formatting problems appear in IE8 for the menu items in the
 main panel and in the '+ Add Items' slide-out panel.

 /hat tip ocean90 for the original report, notes, and images:

 > This issue belongs to all sections and is probably an issue with #31336

 [[Image(f3d91c98-13b0-11e5-9e22-3c170218c786.png)]]
 [[Image(02b98ce8-13b1-11e5-8db4-199070851c5c.png)]]

 /hat tip afercia for:

 > IE 8 doesn't understand `calc()`, providing a % width or in pixels will
 fix the first issue in the first screenshot:

 {{{
 /wp-admin/css/customize-controls.css

 #customize-theme-controls .accordion-section-content {
         margin: 0;
         position: absolute;
         left: 100%;
         top: 0;
         width: IE 8 width here; <--
         width: -webkit-calc(100% - 24px);
         width: calc(100% - 24px);
         padding: 12px;
 }
 }}}

 > About the second issue, looks like `.menu-item-handle` is inheriting
 from `/wp-admin/css/nav-menus.css` a 382px width not sure why IE 8 doesn't
 get the override in

 {{{
 .wp-customizer .menu-item-bar .menu-item-handle {
         max-width: 100%;
 }}}

 > changing max-width in width fixes it.

 Originally reported in https://github.com/voldemortensen/menu-
 customizer/issues/119

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32664>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform