Vertical aligning merged headers

[kiwon34]

Hi,

How can I vertically align grouped column headers?

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

I want to align the titles of header vertically and horizontally.

[paramvir]

Header cells can be horizontally aligned with column.align and column.halign options.

There is no direct option to vertical align the header cells.

css is required to vertically align them.

Code: [Select]

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


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

[EPM Solutions]

hello Team,

I wanted the header text should be centerd and should be wrapped line byline. So used above code with

Code: [Select]

.pq-grid-col>.pq-td-div{
  position: absolute;
  left:4px;
  bottom:4px;
  width:calc(100% - 8px);
white-space: inherit !important;
}

but the result is as shown in the Image.

I tried with autoRowHead, But it is not working.

Can you please tell me how can I resolve this, Here I have Given Column Width as 125PX; we need it as requirement.

[paramvir]

Please try this:

Code: [Select]

.pq-grid-col.pq-merge-cell > .pq-td-div{
    css rules here
}


[EPM Solutions]

it works fine. except last header row. that is pq-grid-col-leaf.

here I want to change the leaf header height. When I change the height it should adjust the height of other higher order header height as well.

I have attached the Screenshot of the issue which I found after adding your suggested code.

[paramvir]

Please recheck.

Working fine here: https://plnkr.co/edit/ixp2sSZfQcHmR8qDS3Gm?p=preview

[EPM Solutions]

Hello team,
As per the example you have given, it is working correct except one column. If I change the width of the column 175 to 100, the last width would not be 100 as shown in the below image, can you please give me the solution.

[paramvir]

Just remove the flex option.

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