Grid Layout for React Components

[matt-peck]

Attempting to wrap a React Component in a Grid Layout for a fluid width change in the panel across devices like this: Example 1:

<div className="ms-Grid">
  <div className="ms-Grid-row">
    <div className="ms-Grid-col ms-sm12  ms-lg2">
      <Panel
           isOpen={ this.state.showPanel } 
           onDismiss={ this._onClosePanel }>
      </Panel>
    </div>
  </div>
</div>

or like this:

Example 2:

<div class="ms-Grid">
  <div class="ms-Grid-row">
    <Panel
         className="ms-Grid-col ms-sm12  ms-lg2" 
         isOpen={ this.state.showPanel } 
         onDismiss={ this._onClosePanel }>
   </Panel>
  </div>
</div>

Neither seem to produce any result. Instead I seem to have override the Panel Component's CSS in a SASS file and create custom styling over different viewport widths.

Is there a way to integrate Grid Layouts with Fabric UI Components?

Thanks!

[mikewheaton]

Do you have Fabric Core loaded on the page? It's no longer bundled with Fabric React, so the classes won't be available unless you've added it.

[matt-peck]

Thanks for the quick response!

I had previously had this loaded on the html page: <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.3.0/css/fabric.min.css">

To be sure, I also installed the Fabric UI Core package with: npm install office-ui-fabric-core

Then I imported it like so: import 'office-ui-fabric-core/dist/css/fabric.min.css';

Regardless of method used to import the library: Example 1 leaves the Panel at default width across all viewport widths. Example 2 when the Panel open event fires, 'isOpen' does fire to 'true', however, the Panel never becomes visible on the screen.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

[Jahnp]

@manishgarg1 , this sounds highly related to #4605 . Would you be able to take a look at this as well if you're doing an investigation for that one? Thanks!

[aditima]

@jordandrako - keeping this with you as it's essentially the same as #4605. @Jahnp - FYI...

[jordandrako]

Closing in favor of #4605, please track progress there, thank you.

[omidnavy]

I noticed in css file that there is no ms-sm12 (and similar classes) , you have to use them with ms-u-[your-desire-width] like ms-u-sm12

[rpandya35]

I have added dependency of "office-ui-fabric-react" . but still not able to use Grid. for example:

A

B

A and B should be in the same row but showing up in the different rows. Do you need to import anything in a component in order to use the fabric UI Grid?