How to center vertically active areas

Asked by Anonymous
4 years ago.

I'm adding in the onBeforeRowHeaderRender content into the active areas of the resource header. How can I center those areas vertically in a responsive way depending on the resource's actual height. See please attached screeshot

how-to javascript

30-11-2021-18-54-31.png

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

In order to center the icon vertically, you need to:

1. Specify the vertical position using "top" and "bottom" properties (use the same values).
2. Center the content using "display: flex".

It could look like this:

dp.onBeforeRowHeaderRender = (args) => {
    args.row.columns[1].areas = [
        {
            top: 0,
            right: 0,
            width: 20,
            bottom: 0,
            style: "display: flex; align-items: center;",
            html: "<span>content</span>",
        }
    ]
};

Comment posted by Anonymous
4 years ago.

Perfect. Thanks you very much!

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