Integrate the properties panel in bpmn.js into an Angular 4 application


To integrate the properties panel, I follow the example available on github ( and move the code to Angular and it’s working well.:grinning:

I just have two questions about the example:

  • If I remove the file styles/app.less, the properties panel is not well integrated in the web page, it is displayed under the BPMN zone with a very bad design. I thought it is useful to override some css to give a different display, but at final it is really required :face_with_raised_eyebrow:. Why it is not integrate in the properties panel component?

  • Currently properties panel uses less format for the CSS which is not the case of others components like bpmn.js, dmn.js and diagram.js. There is CSS version available somewhere?

Thanks a lot for your help.


The only part of the CSS that is relevant is this:

.properties-panel-parent {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 260px;
  z-index: 10;
  border-left: 1px solid #ccc;
  overflow: auto;
  &:empty {
    display: none;
  > .djs-properties-panel {
    padding-bottom: 70px;

We do not make assumptions about how and where you want to position the properties panel, therefore these styles are not included.