pnp/PnP

Quick Links Wrapping Bug in IE 11

zshane15 opened this issue · 0 comments

zshane15 commented

Category

[X ] Bug
[ ] Enhancement

Environment

[X ] Office 365 / SharePoint Online
[ ] SharePoint 2016
[ ] SharePoint 2013

Expected or Desired Behavior

In Internet Explorer 11 (Version 11.1039.17763.0 | Update Version 11.0.175), when using the Quick links web part in the Button layout, there should be three columns of buttons when web part is placed in a 2/3 width container, while viewing on a 1920 x 1080 resolution.

Observed Behavior

The Quick links wrap early creating a large gap on the right and only display in two columns. This is inconsistent with Chrome.

IE 11:
image

Chrome:
image

Steps to Reproduce

  1. Create a Communications site
  2. On the home page, add a "One-third right column" section
  3. Insert a Quick links web part on the left side (2/3 side)
  4. Add at least three links
  5. Set Layout options to "Button"
  6. Leave "Show descriptions" as "No"
  7. Set "Icons" to "Icon on left"
  8. Set "Button appearance" to "Fill color"
  9. Set "Alignment" to "Center"
  10. Set "Title text" to "One line"
  11. Publish
  12. Open site in IE 11 and observe column wrapping

More Details

From what I could find it appears that IE only supports CSS width properties out to two decimals:
@media (min-width: 1024px){ .CanvasSection-xl8 { width: 66.66%; } }

Making the container <div> only 807.76px wide
image

While Chrome supports a much more accurate calculation:
@media (min-width: 1024px){ .CanvasSection-xl8 { width: 66.66666666666666%; } }

Which makes the container <div> exactly 808px wide:
image

There is some JS that runs to set each <div> width after the window is resized. This calculation must not be accounting for the lack of accuracy in IE 11.

image