React Kanban PCF: Bootstrap 4 usage

Like (0) Share

Report

Posted on 23 Jun 2020 12:07:30 by Ravertux

Hi everyone,

I created a kanban PCF which leverages react-bootstrap along with bootstrap 4 for rendering.

This is a project I'm working on for quite some time, even before I got into PCF, which is why I started designing it as a webresource.

Recently I migrated to PCF (which was surprisingly easy to do), but encounter some incosistencies with library usage.

- Bootstrap 4 seems to misalign the Breadcrum navigation of CRM a little too far upwards and smaller (you can see it in the screenshots in the Repo: https://github.com/DigitalFlow/D365-PowerKanban)

- On some organizations, fontawesome.all.js seems to corrupt the navigation icons in the left sidebar of CRM. My dev is fine though.

I can get around the fontawesome issues rather easily by switching to a different way of rendering, for example the react integration of it.

But I'm not sure how to handle the bootstrap 4 issues, are there any best practices?

Thanks for your help.

Kind Regards,

Florian

All responses (2)

Answers (1)

Ravertux 5 on 25 Jun 2020 at 12:12:57

Like (0)

Report

Re: React Kanban PCF: Bootstrap 4 usage

Hi @ScottDurow,

I'm glad that you like the control 🙂

Thanks for the hint. I'm currently not using bootstrap directly, but react-bootstrap instead, which uses the bootstrap classes automatically.
I will look into customizing the bootstrap namespace in the css and passing the bsClass parameter in all bootstrap components for defining the custom namespace, that should do the trick.

Kind Regards,
Florian
Verified answer

ScottDurow 1,039 on 24 Jun 2020 at 11:08:24

Like (3)

Report

Re: React Kanban PCF: Bootstrap 4 usage

Hi @Ravertux
Awesome job on the kanban control!
You will need to namespace your bootstrap CSS using the name of your control. The PCF Control top level container is given a class name that is the name of the control - so all CSS rules then need to be namespaced to that class name so that they do not apply to any styles outside of the PCF control container.

Hope this helps,
Scott