Separator in context menu not visible

Asked by sam
2 years ago.

Hi,

I wanted to add some separators between my menu items, but I can't make them visible. Here is the structure of my menu items array:

items = [
{text: 'Actions on shift', icon: 'fas fa-chevron-right', items: Array(6)},
{text: 'Other actions', icon: 'fas fa-chevron-right', items: Array(2)},
{text: '-'},
{text: 'Employee info', icon: 'fas fa-chevron-right', items: Array(2)},
]

Is there something that I am missing?

bug javascript

Comment posted by Dan Letecky [DayPilot]
2 years ago.

This is the correct syntax.

You might have something in your global CSS that interferes with the menu separator - try turning it off temporarily or test the menu on a blank page.

Let me know if it didn't help.

Comment posted by sam
2 years ago.

I turned off my custom CSS, but I still have the same problem for now.
If the text is only a "-", in the Dom I will get an empty div, with no content:

Answer posted by Dan Letecky [DayPilot]
2 years ago.

It looks like you are using a custom CSS theme - you'll need to add styles for the separator which is created using two nested divs (div > div). Standard items are created using a div and an anchor element (div > a).

In the default theme ("menu_default") the separator style is defined like this:

.menu_default_main div div { border-top: 1px solid #dddddd;margin-top: 2px;margin-bottom: 2px;margin-left: 28px; }

Comment posted by sam
2 years ago.

Thanks, I missed that one! it works perfectly! :)

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Separator in context menu not visible

Products

Learn

Get Support

DayPilot Pro