You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Aug 24, 2021. It is now read-only.
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:
Chrome:
Steps to Reproduce
Create a Communications site
On the home page, add a "One-third right column" section
Insert a Quick links web part on the left side (2/3 side)
Add at least three links
Set Layout options to "Button"
Leave "Show descriptions" as "No"
Set "Icons" to "Icon on left"
Set "Button appearance" to "Fill color"
Set "Alignment" to "Center"
Set "Title text" to "One line"
Publish
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
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:
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.
The text was updated successfully, but these errors were encountered:
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:
Chrome:
Steps to Reproduce
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>
only807.76px
wideWhile Chrome supports a much more accurate calculation:
@media (min-width: 1024px){ .CanvasSection-xl8 { width: 66.66666666666666%; } }
Which makes the container
<div>
exactly808px
wide: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.The text was updated successfully, but these errors were encountered: