CODEWITHSUNDEEP
reactjstypescriptsassoffice-ui-fabricoffice-ui-fabric-react
myermian
myermian

Reputation: 32515

I'm not sure why the Office Fabric UI React layout classes not working

I am creating a React app and using Office Fabric UI React.

I imported the latest version using npm/yarn "office-ui-fabric-react": "7.94.0",. Here is my TSX file which is not producing the desired results:

import React from 'react';
import { Image, SearchBox } from 'office-ui-fabric-react';

import './app-header.scss';
import Logo from './logo.svg'

export default class AppHeader extends React.Component {
    render() {
        return (
            <div className="app-header ms-Grid" dir="ltr">
                <div className="ms-Grid-row">
                    <div className="ms-Grid-col ms-lg1">
                        <Image src="{Logo}" />
                    </div>
                    <SearchBox className="ms-Grid-col ms-lg11" placeholder="Search" />
                </div>
            </div>
        )
    }
}

Even though I used the grid layout, the components show up on top of each other vertically. My expectation was that the controls would be laid out horizontally taking up one column and eleven columns up.

Upvotes: 1

Views: 621

Answers (1)

Ruckert Solutions
Ruckert Solutions

Reputation: 1301

Do you import the stylesheet in your html ?

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>

Upvotes: 1

Related Questions