search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Context menu on event creates an extra div

Asked by Ruud
2 years ago.


I added a context menu to my events, and added some custom CSS. But when i click on the context menu indicator an extra div is added to the dom with the exact same css. It effectively doubles my indicator. Is this normal behaviour?

I added two screenshots showing the extra div.

My event creation looks like this: (typescript)

var event = {
id: reservation.reservationId,
cssClass: 'd-flex',
text: '',
start: reservation.startDate,
end: reservation.endDate,
resource: unitId,
moveVDisabled: true,
moveHDisabled: true,
resizeDisabled: true,
status: reservation.status,
barHidden: true,
areas: [
top: 5,
html: txt,
css: 'scheduler-event-text',
action: 'ContextMenu',
menu: new DayPilot.Menu({
items: [
text: "Reservering bewerken", onclick: that.onEditReservation
top: 5,
visibility: "Visible",
css: "scheduler-event-context-menu fa fa-caret-down",

The Css classes i use look like this: (less)

.scheduler-event-text {
position: relative !important;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
overflow-wrap: normal;
padding: 0 5px;

.scheduler-event-context-menu {
position: relative !important;
width: 21px;
height: 18px;
padding: 0 5px;
margin-left: 5px;
float: right;

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

The purpose of the additional active area div is to keep the icon visible even when you move the mouse out of the event box. It was incorrectly activated for visibility: "Visible" as well. It's now fixed in the latest sandbox build (2018.3.3425).

Comment posted by Ruud
2 years ago.

Thank you for the fix.

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