Author Topic: Vertical aligning merged headers  (Read 4441 times)

kiwon34

  • Pro Ultimate
  • Jr. Member
  • *
  • Posts: 52
    • View Profile
Vertical aligning merged headers
« on: February 12, 2018, 05:31:26 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Vertical aligning merged headers
« Reply #1 on: February 12, 2018, 10:30:17 pm »
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
« Last Edit: February 12, 2018, 10:56:29 pm by paramquery »

EPM Solutions

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 182
    • View Profile
Re: Vertical aligning merged headers
« Reply #2 on: October 18, 2018, 03:16:07 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Vertical aligning merged headers
« Reply #3 on: October 18, 2018, 04:03:19 pm »
Please try this:

Code: [Select]
.pq-grid-col.pq-merge-cell > .pq-td-div{
    css rules here
}

EPM Solutions

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 182
    • View Profile
Re: Vertical aligning merged headers
« Reply #4 on: October 18, 2018, 05:33:53 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Vertical aligning merged headers
« Reply #5 on: October 18, 2018, 05:55:12 pm »

EPM Solutions

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 182
    • View Profile
Re: Vertical aligning merged headers
« Reply #6 on: October 22, 2018, 12:13:37 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Vertical aligning merged headers
« Reply #7 on: October 22, 2018, 05:34:08 pm »