Hi,
I'm adding in onBeforeRowHeaderRender multiple active areas to the second header row's column to show some icons. I want to know, whether it's possible to center them all horizontally. See please attached screenshot.
onBeforeRowHeaderRender: (args) => {
const personResource = args.row.data as PersonResource;
if (personResource.frozen !== undefined) {
return;
}
// Status icons
args.row.columns[1].areas = [];
const leftOffset = 20
let left = 80;
// Same position for top and bottom
// see https://forums.daypilot.org/question/5577/how-to-center-vertically-active-areas
const topBottom = 5;
if (true) {
args.row.columns[1].areas.push(
{
left: left,
top: topBottom,
bottom: topBottom,
style: "display: flex; align-items: center;",
width: 16,
html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAoVJREFUWMPtVj1oU1EU/s59ocqDNovRoRjazR8UcSjqi5tQ8Sc4mFmkIEgFLU0eTj7fILS5L0vVpSiCRQc3ke51SBZxEbuoKEVUbAQJhTxLw/tcYulPmrz2pe1gD9zlnvOd77sfh8MFdiJCOI7T4ThOR5QesShg3/czQRAQwPNtEUDyhohEEiAbBeZyueMA3gJAEAR9hULhzUb6qAgG3Fx8hcjgljowPDy8Ryn1FcDu+tU8yaTnebNb4oBS6toScgDYpZQa2BIHHMeJVavVzwD2r0h9q1QqvePj4wub6oDv+5cakANAdzweT7fNAcdxYpVKJRGLxRJKqX0A9gZBkBCRqwCOrgF7R/KJUqoMYDYIgp+1Wq0cj8fLruvWmgqwbbuT5GMAhwEk6qedUa6faREZyOfzc6scyGazvSIyCeBgm8kBACQ/icg5rfXHf3fLZsDzvC+GYVgApjaBv0jy5FLyVQIAYGRk5Ldpmv0kJ9rFLCIvTNM8UygUfq3KNcPZtu2QvIMIK1tExvL5/C0AbJQ3mnpWLE5ZljUD4Hyr2gZRA3Bda32vqcAwnWzbTpN8uR52khc8z5tsVRdqEZH8s87XA4AfpijsJrTWyy4iqW0VEBbTUkAmkzEA9G1AwIk6NpqAZDJ5DEBng9R3AFdIpgHMNMh39fT0HIksQERWWrkgImMickBr/dTzvFemaR4SERfA/Apsyzlo+SlVSlnk4g55rZQaHB0dnV5a47puFcDdXC73jOR9EemvpywADyIJIHlKRH6QvK21nsAaGw0A6nv+bDabvSgiD0mebtW/6ZAMDQ11G4bRBeCy1jr0r7dUKn1IpVKPRCRhWdb7YrE4Fxa7E/9f/AVgFdo64e0utwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0xMi0xMlQwOTozNzoyMSswMDowMBaMyUEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMTItMTJUMDk6Mzc6MjErMDA6MDBn0XH9AAAAKHRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy90bXAvbWFnaWNrLUw2SlprTkFWvf3kaAAAAABJRU5ErkJggg==" alt="" height="16" width="16">',
toolTip: personResource.tags.ignoreWorkProfileChangesToolTipText
});
left = left - leftOffset;
}
if (true) {
args.row.columns[1].areas.push(
{
left: left,
top: topBottom,
bottom: topBottom,
style: "display: flex; align-items: center;",
width: 16,
html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAAmJLR0QAdYripoEAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhDAgNFBgkkns5AAABk0lEQVRIx+2UO0tDQRCFv42aFGIQQYSIWAsG/AnaSEpLC0utraYQIT4gWMw/ELExRbCxVQsfv0BECwvFRsVgERAsUoS1yOPubnJzFSydYu/dmXMOu8OZhf/4+xDnT7yvX22H8ckKSIFJ6lqO4ArIChle9bSN6ikAYqgy3trk9V4ARWa5a+U+mFDrMlLB4SM63ElOUSTXocM4Vf8ijoAiBYcOUHTWjoQUtLcAMBl0KOOsMShfoB5ArbPGoDwBLQfQYwDO/aSPCpuYd2pHeioIWsGlzPlNNL6AIjmKZLCca0WMWhCjVpZZxFBnV998HwQulBhPxmFiTNydExOHNJGFQbKsMk0Wi+GLZ+71rF2XElM0qPHCgX5GLNOZgE02GO5xiEM29R1kiHfGWrkv9rTUZBpBkXku+47otu6AjFLzsgt6JRiQOW760i2GXd0COWHJq8zoQwpYT3giTGceboPKRtNI9sevzVOwb4SzkBSD3akUkP6xwECwTzc197lIvMYIANes0XB68xjjv2Sb93Pvf/w6vgHHS3Kc6saEOgAAAABJRU5ErkJggg==" alt="" height="16" width="16">',
toolTip: personResource.tags.isIndirectlySubordinatedToolTipText
});
left = left - leftOffset;
}
if (true) {
args.row.columns[1].areas.push(
{
left: left,
top: topBottom,
bottom: topBottom,
style: "display: flex; align-items: center;",
width: 16,
html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAAmJLR0QA9WdaJaEAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhDAgOIh5Gq/EgAAABKklEQVRIx+WVPU7DQBCFvzWIgoqCipZjBIRdJYKWq7yKI8xZ6FIkUNiRcgwo6bkAHgqcYMeO1w5NJKaaYt+befO3cCSmPf4IAoXKC+OQtedaMwEbSZDU/M9Dck/+Wr3/QaDe+UhiUGHVfFgnxWkfgSEMXfPGzJYK5qMzqOCwUGquDiFJfwZg7xSAk+vOOoTEaxAsoyBQUig136VIojVwBctYkuDkmv5QDG6jAeZgM14JeLsW9W2c8wDccNG5tR/MucIJpLbaNLfdRmcdWX+n0KM9d0k4b2Y0zOoZPHFJuTfyHgm/Jy22ES9ylXKlmxEffGwVQIsKPh11NbfwXK6vKnpoRo+y6YSc2632YN7UH78HZ0yAQGYrsQsfKsF1P/7HaFC0tR/w6YnjtG9XcHSMI4iIlQAAAABJRU5ErkJggg==" alt="" height="16" width="16">',
toolTip: personResource.tags.personWillEnterToolTipText
});
left = left - leftOffset;
}
if (true) {
args.row.columns[1].areas.push(
{
left: left,
top: topBottom,
bottom: topBottom,
style: "display: flex; align-items: center;",
width: 16,
html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAAmJLR0QA9WdaJaEAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhDAgNNhsaKWyjAAABGklEQVRIx82VQU7DMBREn62sUDecrhuEwqYHQJpTfKkHYNOqHBG21CxiZKfJT01aCRxlYckzf/54bMO/GbpttVYXDMPEUPodgQVhQASwVU0PqHird92lsIbuR83GZZuKuXKoow+3/ANob2meorsGNwQfbPRoLwqWmhTUcGDHhjO9Dp6KbI3SYI9G/QtQr6Szkg6gXFJRJUjFW28XBIlE4FgaGfR1zaE+8Qz0YqD4oZma6Ec6EYBeD7ZtykHbmBIE5ztlv462rfei1cQn3udNjH6E622s4DHDo5uDCcVOSV85BWG80jHRxifhjU9iLf5KEmdV7Mt5bFAwVgFgr171uHxllcvOE98t3TbrgrSGQKugus/Dcq+n7Q/HN2ruhl6KVeElAAAAAElFTkSuQmCC" alt="" height="16" width="16">',
toolTip: personResource.tags.personLeftCompanyToolTipText
});
left = left - leftOffset;
}
if (true) {
args.row.columns[1].areas.push(
{
left: left,
top: topBottom,
bottom: topBottom,
style: "display: flex; align-items: center;",
width: 16,
html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAAmJLR0QA9WdaJaEAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhCxcKMREKqJ4mAAABhElEQVQ4y5XTPW4UQRQE4K9nByRrLa+DDR04dLIHQPxcACdERJacGAnS1ZMsR44QuCWLCCQuQWIuwI84ACexZAcGzwzB7MLszoJNBSN196t5VfW66SEQs28f5Yo9If+lfGVxDIi92CMGfVLRp+Qqhk6dxjBXbiK0YkyNjU3JPWErOsS2KZjG9o0dMpzYUKlsOJntdJAW4ixyHfd96Zw/yF+jUOeVHVKu8ZrGlSuNdpXr7m/Tkv7n3pKs46KlvMjvVnoIxNgRdbNm3741dYOjGHeHWCzYndpSScnISCKpbLXxLhEiETsOMVjQOMBh7LQVvwmzhq/mVY1z562DzknMTQcpN/HY2Z8k7uBnl7KbP0bSZCmQxdA3E02b2hKhkXx3L18GypmdAxNVq7+27hneu2gVJ5WJA28yikjEpuOu3WRo2B3RAMexSaRSoZKNuqO59BLN4kUbyQ4UiXjo0/KdrHr5gkf5c4rSB7uub/EYS2eelBpP/Zjn8w80krvdpG+JFP9J+AXs7m5BC0wzTgAAAABJRU5ErkJggg==" alt="" height="16" width="16">',
toolTip: personResource.tags.calculationStatusToolTipText
});
left = left - leftOffset;
}
}