Hello,
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;
}