ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: kiwon34 on February 12, 2018, 05:31:26 pm

Title: Vertical aligning merged headers
Post by: kiwon34 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.

Title: Re: Vertical aligning merged headers
Post by: paramvir 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

Title: Re: Vertical aligning merged headers
Post by: EPM Solutions 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.

Title: Re: Vertical aligning merged headers
Post by: paramvir 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
}


Title: Re: Vertical aligning merged headers
Post by: EPM Solutions 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.

Title: Re: Vertical aligning merged headers
Post by: paramvir on October 18, 2018, 05:55:12 pm

Please recheck.

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

Title: Re: Vertical aligning merged headers
Post by: EPM Solutions 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.

Title: Re: Vertical aligning merged headers
Post by: paramvir on October 22, 2018, 05:34:08 pm

Just remove the flex option.

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