search

OfficeDev / office-ui-fabric-core

The front-end CSS framework for building experiences for Office and Microsoft 365.
https://developer.microsoft.com/en-us/fabric
Other
3.77k stars 467 forks source link

ms-Grid-col doesn't render adjacent? #1123

Open msimecek opened 6 years ago

msimecek commented 6 years ago

I'm using Fabric Core from CDN (v9.6.0) and whatever I try, the columns in ms-Grid render below one another, not next to each other. I've copy&pasted the sample from docs and it doesn't work either. Am I doing domething wrong or is it a bug in Fabric?

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">
</head>

<body class="ms-Fabric">
    <div class="ms-Grid">
        <div class="ms-Grid-row">
            <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A</div>
            <div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B</div>
        </div>
    </div>
</body>

</html>

And result (with borders for clarity):

2018-06-27_13-28-57 Edge

2018-06-27_13-26-04 Firefox

mikewheaton commented 6 years ago

Can you use the developer tools to inspect the styles that are being applied? I copied your code into a CodePen and it looks to be working fine: https://codepen.io/mikewheaton/pen/mKzzeK

msimecek commented 6 years ago

@mikewheaton Your CodePen works fine on my machine too. I don't see any difference in code... I even added jQuery and Fabric jQuery plugin to match your CodePen fully and it still doesn't work... You can see for yourself: https://dxfabrictest.azurewebsites.net/ (not live anymore)

These are the styles applied to A:

.ms-lg2 {
    width: 16.666666666666664%;
}
.ms-Grid-col {
    position: relative;
    min-height: 1px;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}
.ms-Fabric {
    color: #333;
    font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
    font-size: 14px;
}

This is B:

.ms-lg10 {
    width: 83.33333333333334%;
}
.ms-Grid-col {
    position: relative;
    min-height: 1px;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}
.ms-Fabric {
    color: #333;
    font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
    font-size: 14px;
}
mikewheaton commented 6 years ago

Sorry for the confusion here, the CodePen I linked to was using an old version of Fabric. Newer versions require the dir attribute to be set to indicate whether to render in the standard left-to-right (LTR) direction or right-to-left (RTL).

So you'll need to add dir="ltr" to the html or body tag, or to the Grid div itself as shown here: https://codepen.io/mikewheaton/pen/YvJbBR?editors=1100

Hope that helps!

msimecek commented 6 years ago

Yes! This solves it for me, thanks :) Should I create a PR to update the docs?

BTW - both your CodePens use the same Fabric version. The only difference is the dir="ltr"... I still don't understand why both of them work. CodePen doesn't specify dir anywhere on the page.

codepens

mikewheaton commented 6 years ago

I forked from an old CodePen, which also had Fabric Core 2.1.0 loaded (hidden away in the settings): image

And yes, we'd love a PR to update the docs!

msimecek commented 6 years ago

Done. See: https://github.com/OfficeDev/office-ui-fabric-react/pull/5430 (had to do it in the React repo, because Core repo doesn't reflect the live site)