cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
New Member

React Kanban PCF: Bootstrap 4 usage

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

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

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

View solution in original post

2 REPLIES 2
Highlighted

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

View solution in original post

Highlighted
New Member

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

Helpful resources

Announcements
August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (4,138)