React Kanban PCF: Bootstrap 4 usage

(0) Share

Report

Posted on 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

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (2)

Answers (1)

Verified answer

ScottDurow 1,039 on at

Like (3)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Ravertux 5 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No