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

How to center vertically active areas

Asked by Anonymous
7 months 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

Answer posted by Dan Letecky [DayPilot]
7 months 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
7 months ago.

Perfect. Thanks you very much!

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