Custom Palette - CSS not applying

Developers
1

I have extended Palette.js from the diagram-js library. My palette does get initialized, however it does not get the CSS applied, even though I have it included in the diagram-js.css file.

Snippet from diagram-js.css:

.lg-palette {
  position:absolute;
  left: 20px;
  top: 20px;
  box-sizing: border-box;
  width: 48px;
}

Snippet from Palette.js:

Palette.LG_HTML_MARKUP =
      '<div class="lg-palette">' +
      '<div class="lg-palette-entries"></div>' +
      '<div class="lg-palette-toggle"></div>' +
      '</div>';


Palette.prototype._lgInit = function() {
  var canvas = this._canvas,
  eventBus = this._eventBus;
  
  var parent = canvas.getContainer(),
  container = this._lgContainer = domify(Palette.LG_HTML_MARKUP),
  self = this;
  
  parent.appendChild(container);
  
  domDelegate.bind(container, LG_ELEMENT_SELECTOR, 'click', function(event) {
    
    var target = event.delegateTarget;
    
    if (domMatches(target, LG_TOGGLE_SELECTOR)) {
      return self.lgToggle();
    }
    
    self.lgTrigger('click', event);
  });
  
  // prevent drag propagation
  domEvent.bind(container, 'mousedown', function(event) {
    event.stopPropagation();
  });
  
  // prevent drag propagation
  domDelegate.bind(container, LG_ENTRY_SELECTOR, 'dragstart', function(event) {
    self.lgTrigger('dragstart', event);
  });
  
  eventBus.on('canvas.resized', this._lgLayoutChanged, this);
  
  eventBus.fire('palette.create', {
    container: container
  });
};

Screenshots to show what it looks like:

Anmerkung 2020-02-18 161903 Anmerkung 2020-02-18 161939

What am I doing wrong?

2

It’s hard to help you if we don’t know your project setup. Are you able to share it, e.g. via http://codesandbox.io/?

3

Hi Niklas,

the issue was actually very simple. It turns out that I had to add the styles to the diagram-js.css that is in node_modules/bpmn-js/dist/assets and not the one in node_modules/diagram-js/assets

Best Regards

1 Like