How to remove html element separator from the tool menu?

Developers
1

Hello, people !
I’m trying to include the BpmnJS in my Angular application, but I want to remove the menu bar on the left, because it is displayed on top of my diagram. I try to remove the menu on the left using Custom Palette Provider for this purpose. I succeeded to delete entries, but the separator stayed on the screen like this:

Screenshot 2022-11-08 at 15.34.00
Screenshot 2022-11-08 at 15.34.003368×810 147 KB

Can anyone help me ?
Does anyone have any idea if I can delete this item ?
Screenshot 2022-11-08 at 15.42.36
Screenshot 2022-11-08 at 15.42.363364×810 162 KB

2

Do you want a viewer only or still be able to edit the diagram?

3

no edit, only viewer

4

Is there any way how to make this with Modeler, not Viewer - to remove menu bar, but to have the opportunity to expand the diagram ?

5

With expand the diagram do you mean that you can zoom and scroll? There is a navigated viewer for this purpose:

import NavigatedViewer from 'bpmn-js/lib/NavigatedViewer';
1 Like
6

not only - and movement of the individual elements (as well resize of the tasks)

7

So, a modeler with limited functionality? If you don’t need the palette you could either hide it through CSS (.djs-palette { display: none; } or by disabling the module:

const modeler = new Modeler({
  additionalModules: [
    {
      palette: [ 'value', null ],
      paletteProvider: [ 'value', null ]
    }
  ]
});
8

Hey Greeting Everyone, I also want to add little bit effort rom my side. I hope it will helpfull for you.

To remove an HTML element separator from the tool menu, you will need to access the HTML code for the page or template that contains the separator. Once you have access to the HTML code, you can remove the separator element by doing the following:

  1. Locate the code for the separator element in the HTML. It should look something like this: <hr> or <div class="separator"></div>.
  2. Once you have identified the code for the separator, simply delete it.
  3. Save the changes to the HTML file.
  4. Reload the webpage in the browser to confirm that the separator has been removed.

It’s important to note that the specific steps may vary depending on the platform or framework being used, also the method i described is if you are doing this on a static HTML page, but if it is a dynamic web page, you would need to find out where the separator is added in the code and remove it from there.

It’s always a good practice to backup the original file before making any changes, in case something goes wrong and you need to revert to the original.

Regard,

Noah