I'm working on a Word 2016 Add-in project and I'm having some difficulties using Office UI Fabric libraries. Basically I would like to give my Add-in the official Office look & feel, so I thought that Office UI Fabric would be the best choice, in conjunction with Fabric javascript components, like dropdown menus and so on. I installed these two NuGet packages: OfficeUIFabric 2.6.3 and OfficeUIFabricJS 1.4.0 , then I added some components to a page, by using these css classes: "ms-Dropdown", "ms-ChoiceField" and some icon classes, like "ms-Icon--Settings". These are the (odd) results I'm having: OfficeUIFabric and OfficeUIFabricJS ship two different versions of the same "fabric.components.css" file, so the final result depends on the order on which these two packages are installed. with "fabric.components.css" coming from OfficeUIFabric 2.6.3, all icons are missing but ChoiceField is styled correctly. with "fabric.components.css" coming from OfficeUIFabricJS 1.4.0, icons are visible, but dropdown button is being drawn outside the rectangular textbox and ChoicheField's style is wrong (the label wraps and checkbox is a standard HTML control). Do you have any experience with these libraries? I'm about to switch to a more comfortable framework, like Bootstrap or similar...

Do you have any experience with these libraries? Yes ;) If this is your question. These are the (odd) results I'm having ... I surprise you are getting any results at all. The issue with incorrect usage of OfficeUIFabric libraries. Let me clarify how team behind planned on the usage of these libraries ... Fabric 2.6.1 (current latest version is 2.6.3 ) is last known (stable) version of the package where the Core part (CSS) and components part (JS components) where together. Basically when you install this version, you would use it as is. No need for any other packages. In fact you cannot install on the top Different core version or JS version, you will brake the package integrity (which is that you observe) Next development and major release was absolutely different. The package separate "JS components" part and become " Office UI Fabric Core ". this package is nothing else as set of CSS styles to make your custom app look like Office itself. The current Core Package should be used on its own (basically you have ms_ styles to use at your convenience) or in the couple with " Office UI Fabric JS ". Finally the new package " Office UI Fabric JS " is the set of JS components (which used to be included inside 2.6.1 package) should be used when you want to have "styled" components which will look like Office native components. Fabric JS 1.4.0 uses Fabric Core 5.0.1. Probably your next question why is it happen? The old package 2.6.1 has components part based on JQuery; the new one 1.4.0 (weird, ahh? the version is lower) has no dependency on any 3rd party package, written with TypeScript. I hope this is clarify something for you or someone who puzzled as well. We work with Fabric package I believe from version one and try both 2.6.1 and new 1.4.0+5.0.1. There are a lot of issues, too many things out of order. We cannot afford to spend so much time just to have new slick look. Basically with some tweaks we stopped on 2.6.1 version and will not go with new Fabric at least for now. If I would have luxury to go back and choose again on the UI package, I would not go with Fabric, indeed, instead would use JQuery UI or JQuery Mobile. No offence to Microsoft team, but Fabric team is looks like bunch of teenagers, who is trying their best, but the luck of experience spoil everything. This is not world class software as we used to see from Microsoft.

office-jsoffice365-appsoffice-ui-fabric

jeanie77

Reputation: 544

CSS oddities with Office UI Fabric libraries

I'm working on a Word 2016 Add-in project and I'm having some difficulties using Office UI Fabric libraries.

Basically I would like to give my Add-in the official Office look & feel, so I thought that Office UI Fabric would be the best choice, in conjunction with Fabric javascript components, like dropdown menus and so on.

I installed these two NuGet packages: OfficeUIFabric 2.6.3 and OfficeUIFabricJS 1.4.0, then I added some components to a page, by using these css classes: "ms-Dropdown", "ms-ChoiceField" and some icon classes, like "ms-Icon--Settings".

These are the (odd) results I'm having:

OfficeUIFabric and OfficeUIFabricJS ship two different versions of the same "fabric.components.css" file, so the final result depends on the order on which these two packages are installed.
with "fabric.components.css" coming from OfficeUIFabric 2.6.3, all icons are missing but ChoiceField is styled correctly.
with "fabric.components.css" coming from OfficeUIFabricJS 1.4.0, icons are visible, but dropdown button is being drawn outside the rectangular textbox and ChoicheField's style is wrong (the label wraps and checkbox is a standard HTML control).

Do you have any experience with these libraries? I'm about to switch to a more comfortable framework, like Bootstrap or similar...

Upvotes: 3

Answers (3)

Alex Klaus

Reputation: 8934

I'd like to share my recent experience with the Office Add-in JS libraries.

ATM, there are two ways of developing the front-end part of the Office 365 add-in:

A ReactJS app with using office-ui-fabric-react library. It's a recommended way of building add-ins, as it's an up-to-date project with all proper styles and good components.
Your own app with CSS/SASS styles from office-ui-fabric-core (just basic styles, no components). The styles are well documented (see under 'dist/documentation' of the project) and can be a good replacement for Bootstrap/Material UI frameworks, considering that the look of the add-in must obey the official guidelines.

I do NOT recommend using office-ui-fabric-js library in combination with JS frameworks (e.g. Angular, Vue), even if at the first glance it might be appealing (has some components and nice styles). It's an unprofessionally built library (see this list of problems) with CSS from an old version of office-ui-fabric-core, and it seems to be abandoned.

In terms of other ways officially recommended:

The AngularJS library (ng-officeuifabric) is officially "in archive mode". No signs of supporting Angular.
The iOS project hasn't been updated for 2 years (though, it didn't show much life before).

Upvotes: 1

user7722397

Reputation:

What Slava described is correct.

As an alternative, can you reference Fabric from the CDN in your project? If referencing the CDN is an option for you (instead of installing the NuGet packages), then follow this topic to reference Fabric from the CDN: Use Office UI Fabric in Office Add-ins

The files on the CDN have been built together such that the version numbers match. Also, because Fabric JS uses Fabric Core, the correct version of Fabric Core is deployed along with the Fabric JS files. So you don't have to guess which version of Fabric Core should be used with a newer version of Fabric JS.

Upvotes: 1

Slava Ivanov

Reputation: 6912

Do you have any experience with these libraries?

Yes ;) If this is your question.

These are the (odd) results I'm having ...

I surprise you are getting any results at all. The issue with incorrect usage of OfficeUIFabric libraries. Let me clarify how team behind planned on the usage of these libraries ...

Fabric 2.6.1 (current latest version is 2.6.3) is last known (stable) version of the package where the Core part (CSS) and components part (JS components) where together. Basically when you install this version, you would use it as is. No need for any other packages. In fact you cannot install on the top Different core version or JS version, you will brake the package integrity (which is that you observe)
Next development and major release was absolutely different. The package separate "JS components" part and become "Office UI Fabric Core". this package is nothing else as set of CSS styles to make your custom app look like Office itself. The current Core Package should be used on its own (basically you have ms_ styles to use at your convenience) or in the couple with "Office UI Fabric JS".
Finally the new package "Office UI Fabric JS" is the set of JS components (which used to be included inside 2.6.1 package) should be used when you want to have "styled" components which will look like Office native components. Fabric JS 1.4.0 uses Fabric Core 5.0.1. Probably your next question why is it happen? The old package 2.6.1 has components part based on JQuery; the new one 1.4.0 (weird, ahh? the version is lower) has no dependency on any 3rd party package, written with TypeScript.

I hope this is clarify something for you or someone who puzzled as well. We work with Fabric package I believe from version one and try both 2.6.1 and new 1.4.0+5.0.1. There are a lot of issues, too many things out of order. We cannot afford to spend so much time just to have new slick look. Basically with some tweaks we stopped on 2.6.1 version and will not go with new Fabric at least for now. If I would have luxury to go back and choose again on the UI package, I would not go with Fabric, indeed, instead would use JQuery UI or JQuery Mobile. No offence to Microsoft team, but Fabric team is looks like bunch of teenagers, who is trying their best, but the luck of experience spoil everything. This is not world class software as we used to see from Microsoft.

Upvotes: 5

CSS oddities with Office UI Fabric libraries

Answers (3)

Related Questions