Vertical alignment in header.

[kiwon34]

Hi,

This is the second time I'm asking the question.

How can I vertically align grouped column headers?

In this example,

https://paramquery.com/pro/demos/showhide_groups

please tell me how to vertically align the first column "Some No" to the center of the cell.

Your answer last time was custom the css like below.
.pq-grid-col>.pq-td-div{
  position: absolute;
  left:4px;
  bottom:4px;
  width:calc(100% - 8px);
}

But it won't align the headers.
Could you suggest us other ways to vertically align the header content?

Thank you.

[paramvir]

The above css is to to vertically align header cells to the bottom which works fine.

To vertically align them to center, replace bottom: 4px with bottom:calc(50% - 9px);

Code: [Select]

.pq-grid-col>.pq-td-div{
  position: absolute;
  left:4px;
  bottom:calc(50% - 9px);
  width:calc(100% - 8px);
}

Please note that hwrap has to be kept false.

https://plnkr.co/edit/kVDKDHrVrHBmw1tpPGyt?p=preview

[paramvir]

If there is a filter header row, you might want to exclude it by adding css not() rule for the filter row.

Code: [Select]

:not(.pq-grid-header-search-row) > .pq-grid-col>.pq-td-div{
  position: absolute;
  left:4px;
  /*bottom:4px;*/
bottom:calc(50% - 9px);
  width:calc(100% - 8px);
}


[paramvir]

This is old post but vertical alignment of grouped headers cells has a better css solution now.

https://paramquery.com/pro/demos/showhide_groups

It works similar to that of merged cells in body.

https://paramquery.com/pro/demos/merge_colspan

Code: [Select]

.pq-merge-cell > div{
position: relative;
top: 50%; /*50% for middle, 100% for bottom*/
transform: translateY(-50%); /*-50% for middle, -100% for bottom*/
}

Vertical alignment inbuilt support is being added to upcoming versions.

[kiwon34]

Thank you very much.

I hope the vertical alignment comes in as inbuilt option as soon as possible.

Until then, I will use the css options.