Fluentui: SharePoint classic page: css in classic adds extra space to BUTTON and other elements, which breaks fabric-react styling.

[gabrielruss]

Hello, I am new to React so this could just be an issue with my code but I am seeing an issue with the spacing on the ContextualMenu when adding a href vs a onClick property to the menu items.

And here is the code snippet from my component.

Any ideas why the items with the onClick property have that left padding added? You will also notice that it adds a horizontal scroll bar. This only seems to happen if you leave off a href property on an item.

[gabrielruss]

Ok I found the culprit...still not sure why it is doing this though.

SharePoint's css is placing a margin-left: 10px.

Is this something I will need to manually style back into place?

[phkuo]

Hey there,

It looks like you're trying to use our controls in Classic SharePoint, not the Modern experience. In Classic SharePoint, we have a lot of CSS to override browser defaults. That means, if you drop a button on the page, it will automatically be styled to look like all other SharePoint buttons. Fabric React uses a different philosophy, where we don't want to affect anything else on the page, and everything is self contained.

If you want to use Fabric React controls in Classic SharePoint, you will run into many of these issues. For this one in particular, you'll want to overwrite that style like so:

.ms-ContextualMenu button {
    @include margin-left(0);
}

I think the menu automatically changes to using <button> instead of <a> if there's no href, hence why you're seeing this.

[dzearing]

I've notified the sharepoint folks in chart of the modern webparts integration in classic pages, and they will evaluate how this can be generally avoided on our end.

Thanks. Closing this issue, as this is more of a general webparts in classic problem than a library specific one.