CSS oddities with Office UI Fabric libraries

Question

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...

Answer 1

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.