cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Ravertux
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

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

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

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
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Power Apps June 2021

June Power Apps Community Call

Don't miss the call this month on June 16th - 8a PDT

Users online (43,130)